全部产品

video 视频

更新时间:2020-11-11 17:50

用户可通过 video 组件播放视频。相关 API:my.createVideoContext。

注意:

  • css 动画对 video 组件无效。
  • 自定义竖屏观看视频时两边出现的白色填充:
    • 如果是因为视频的宽高比跟 video 组件的宽高比不一致,则由 object-fit 来控制 ;
    • 如果是由于 poster 实际的宽高比跟容器的宽高比不一致,则由 poster-size 来控制。

扫码体验

image.png

示例代码

// API-DEMO page/component/video/video.axml
<view>
  <video id="myVideo" 
    src="{{video.src}}" 
    controls="{{video.showAllControls}}"
    loop="{{video.isLooping}}"
    muted="{{video.muteWhenPlaying}}"
    show-fullscreen-btn="{{video.showFullScreenButton}}"
    show-play-btn="{{video.showPlayButton}}"
    show-center-play-btn="{{video.showCenterButton}}"
    object-fit="{{video.objectFit}}"
    autoplay="{{video.autoPlay}}"
    direction="{{video.directionWhenFullScreen}}"
    initial-time="{{video.initTime}}"
    mobilenet_hint_type="{{video.mobilenet_hint_type}}"
    onPlay="onPlay" 
    onPause="onPause" 
    onEnded="onEnded"
    onError="onPlayError"
    onTimeUpdate="onTimeUpdate"
   />
</view>
// API-DEMO page/component/video/video.js
Page({
  data: {
       status: "inited",
    time: "0",
    video: {
      src: "XNDM0OTQzMDc2OA==",
      showAllControls: false,
      showPlayButton: false,
      showCenterButton: true,
      showFullScreenButton: true,
      isLooping: false,
      muteWhenPlaying: false,
      initTime: 0,
      objectFit: "contain",
      autoPlay: false,
      directionWhenFullScreen: 90,
      mobilenet_hint_type: 2,
    },
  },
    onPlay(e) {
    console.log('onPlay');
  },
  onPause(e) {
    console.log('onPause');
  },
  onEnded(e) {
    console.log('onEnded');
  },
  onPlayError(e) {
    console.log('onPlayError, e=' + JSON.stringify(e));
  },
  onTimeUpdate(e) {
    console.log('onTimeUpdate:', e.detail.currentTime);
  },  
});

属性

属性名类型默认值说明
styleString-内联样式
classString-外部样式名
srcString-要播放的视频资源地址,支持优酷视频编码(阿里云客户端10.1.75),优酷视频上传流程请见 小程序视频播放。src 支持的协议如下:vid/showId: XMzg2Mzc5MzMwMA== apFilePath: https://resource/xxx.video
initial-timeNumber-指定视频初始播放位置,单位:s
durationNumber-指定视频时长,单位s,默认读取视频本身市场信息
autoplayBooleanfalse是否自动播放
loopBooleanfalse是否循环播放
mutedBooleanfalse是否静音播放
page-gestureBooleanfalse非全屏状态下是否支持手势调节音量和亮度
directionNumber-设置全屏时视频的方向,不指定则根据宽高比自动判断。有效值为 0(正常竖向), 90(屏幕逆时针90度), -90(屏幕顺时针90
show-fullscreen-btnBooleantrue是否显示全屏按钮
show-play-btnBooleantrue是否显示视频底部控制栏的播放按钮
show-center-play-btnBooleantrue是否显示视频中间的播放按钮
enable-progress-gestureBooleantrue是否开启左右滑动控制进度的手势
object-fitStringcontain当视频大小与 video 容器大小不一致时,视频的表现形式。contain:包含,fill:填充(播放后生效,如果视频初始化(未播放)状态,显示视频自动适应宽度),cover:覆盖video标签认宽度300px、高度225px,设置宽高可以通过 style 设置 width 和 height。
posterString-视频封面图的 URL,支持jpg、png等图片,如 _https://*.jpg。 如果不传的话,默认取视频的首帧图作为封面图。
controlsBooleantrue是否显示默认播放控件(播放/暂停按钮、播放进度、时间)
mobilenet_hint_typeNumber-移动网络提醒样式:0-不提醒;1-tip提醒;2-阻塞提醒(无消耗流量大小);3-阻塞提醒(有消耗流量大小)
poster-sizeStringcontain当 poster 高宽比跟视频高宽不匹配时,如何显示 poster,设置规则同 background-size 一致
onPlayEventHandle-当开始/继续播放时触发 play 事件
onPauseEventHandle-当暂停播放时触发 pause 事件
onEndedEventHandle-当播放到末尾时触发 ended 事件
onTimeUpdateEventHandle-播放进度变化时触发,event.detail = {currentTime: '当前播放时间',userPlayDuration:'用户实际观看时长',videoDuration:'视频总时长'} 。触发频率应该在 250ms 一次
onLoadingEventHandle-视频资源加载中
onStopEventHandle-视频播放终止
onRenderStartEventHandle-当视频加载完真正开始播放时触发
onErrorEventHandle-视频播放出错时触发(errorCode 见下面错误码表)
onFullScreenChangeEventHandle-视频进入和退出全屏时触发,event.detail = {fullScreen, direction},direction的值可能为 vertical 或 horizontal
onTapEventHandle-点击视频 view 时触发,event.detail = {ptInView:{x:0,y:0}}
onUserActionEventHandle-用户操作事件,event.detail = {tag:"mute", value:0},tag为用户操作的元素,目前支持的 tag 有:play(底部播放按钮)、centerplay(中心播放按钮)、mute(静音按钮)、fullscreen(全屏按钮)、retry(重试按钮)、mobilenetplay(网络提醒的播放按钮)

错误码

错误码大类详细说明
1loading、playing 过程中都可能抛出未知错误
1002loading、playing 过程中都可能抛出播放器内部错误
1005loading、playing 过程中都可能抛出网络连接失败
1006loading 异常数据源错误
1007loading 异常播放器准备失败
1008loading 异常网络错误
1009loading 异常搜索视频出错(源出错的一种)
1010loading 异常准备超时,也可认为是网络太慢或数据源太慢导致的播放失败。
400loading 异常读 ups 信息超时
3001loading 异常audio 渲染出错
3002loading 异常硬解码错误
2004playing 过程中可能抛出播放过程中加载时间超时
1023playing 过程中可能抛出播放中内部错误(ffmpeg 内错误)

支持的视频封装格式

iOS、Android 支持以下视频封装格式: mp4、mov、m4v、3gp、m3u8、flv

支持的编码格式

iOS、Android 支持以下编码格式: H.264、AAC

常见问题

video 组件中播放的视频,当用户加载观看视频一次后,再次进行观看的时候是拉取的缓存,还是再次使用网络重新加载的?

目前的缓存策略是如果视频是循环播放的,再次观看是拉取的缓存,如果不是循环播放,每次都是网络重新加载。 主要是针对一些循环播放的短视频场景提供缓存能力。

缓存中的视频什么时候会清除掉 ?

页面销毁或者关闭小程序会清除掉。

小程序怎么获取视频时长?

在视频组件onTimeUpdate方法中获取。

video组件,把 loop 字段设置为循环播放,播放一次后,在播放第二次的时候,把视频资源删除,发现无法播放了,和你们文档上的缓存策略好像不一样 ?

虽然再次播放拉取的是缓存中的视频,但是还是会校验视频资源的。