支付宝小程序媒体组件 视频·video

版本需求：基础库版本 1.10.0 开始支持，低版本需要做 兼容处理。

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

说明：

• css 动画对 video 组件无效。
• 自定义竖屏观看视频时两边出现的白色填充：
  • 如果是因为视频的宽高比跟 video 组件的宽高比不一致，请通过 object-fit 进行调整 ；
  • 如果是由于 poster 实际的宽高比跟容器的宽高比不一致，请通过 poster-size 进行调整。

扫码体验

效果示例

示例代码

<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}}"
    mobilenetHintType="{{video.mobilenetHintType}}"
    onPlay="onPlay" 
    onPause="onPause" 
    onEnded="onEnded"
    onError="onPlayError"
    onTimeUpdate="onTimeUpdate"
   />
</view>
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,
    mobilenetHintType: 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);
},
});

属性

错误码

支持的视频封装格式

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

支持的编码格式

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

常见问题

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

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

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

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

小程序如何获取视频时长？

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

video 组件，把 loop 字段设置为循环播放，在播放第二次的时候，把视频资源删除，发现无法播放 ？

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