Skip to main content
Version: 下个版本

Video

视频。相关api：Taro.createVideoContext

备注：h5上因为没有测试，所以暂时写了“待定”，需要Video来确认。

支持情况：

参考文档

类型​

ComponentType<VideoProps>

示例代码​

export default class PageView extends Component {
  constructor() {
    super(...arguments)
  }

  render() {
    return (
      <View className='components-page'>
        <Video
          id='video'
          src='https://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400'
          poster='https://misc.aotu.io/booxood/mobile-video/cover_900x500.jpg'
          initialTime='0'
          controls={true}
          autoplay={false}
          loop={false}
          muted={false}
        />
      </View>
    )
  }
}

VideoProps​

参数类型默认值必填说明
srcstring是要播放视频的资源地址
durationnumber否指定视频时长
controlsbooleantrue否是否显示默认播放控件（播放/暂停按钮、播放进度、时间）
danmuListany[]否弹幕列表
danmuBtnbooleanfalse否是否显示弹幕按钮，只在初始化时有效，不能动态变更
enableDanmubooleanfalse否是否展示弹幕，只在初始化时有效，不能动态变更
autoplaybooleanfalse否是否自动播放
loopbooleanfalse否是否循环播放
mutedbooleanfalse否是否静音播放
initialTimenumber否指定视频初始播放位置
pageGesturebooleanfalse否在非全屏模式下，是否开启亮度与音量调节手势
directionnumber否设置全屏时视频的方向，不指定则根据宽高比自动判断。有效值为 0（正常竖向）, 90（屏幕逆时针90度）, -90（屏幕顺时针90度）
showProgressbooleantrue否若不设置，宽度大于240时才会显示
showFullscreenBtnbooleantrue否是否显示全屏按钮
showPlayBtnbooleantrue否是否显示视频底部控制栏的播放按钮
showCenterPlayBtnbooleantrue否是否显示视频中间的播放按钮
enableProgressGesturebooleantrue否是否开启控制进度的手势
objectFitkeyof ObjectFit"contain"否当视频大小与 video 容器大小不一致时，视频的表现形式
posterstring否视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置 poster 无效
showMuteBtnbooleanfalse否是否显示静音按钮
titlestring否视频的标题，全屏时在顶部展示
playBtnPositionkeyof PlayBtnPosition'bottom'否播放按钮的位置
- bottom: controls bar 上
- center: 视频中间
enablePlayGesturebooleanfalse否是否开启播放手势，即双击切换播放/暂停
autoPauseIfNavigatebooleantrue否当跳转到其它小程序页面时，是否自动暂停本页面的视频
autoPauseIfOpenNativebooleantrue否当跳转到其它微信原生页面时，是否自动暂停本页面的视频
vslideGesturebooleanfalse否在非全屏模式下，是否开启亮度与音量调节手势（同 page-gesture）
vslideGestureInFullscreenbooleantrue否在全屏模式下，是否开启亮度与音量调节手势
adUnitIdstring否视频前贴广告单元ID，更多详情可参考开放能力视频前贴广告
posterForCrawlerstring否用于给搜索等场景作为视频封面展示，建议使用无播放 icon 的视频封面图，只支持网络地址
showCastingButtonboolean否显示投屏按钮。只安卓且同层渲染下生效，支持 DLNA 协议
pictureInPictureMode"" or "push" or "pop" or ("push" or "pop")[]否设置小窗模式： push, pop，空字符串或通过数组形式设置多种模式（如： ["push", "pop"]）
enableAutoRotationboolean否是否开启手机横屏时自动全屏，当系统设置开启自动旋转时生效
showScreenLockButtonboolean否是否显示锁屏按钮，仅在全屏时显示，锁屏后控制栏的操作
onPlayCommonEventFunction否当开始/继续播放时触发 play 事件
onPauseCommonEventFunction否当暂停播放时触发 pause 事件
onEndedCommonEventFunction否当播放到末尾时触发 ended 事件
onTimeUpdateCommonEventFunction<onTimeUpdateEventDetail>否播放进度变化时触发, 触发频率 250ms 一次

event.detail = {currentTime, duration}
onFullscreenChangeCommonEventFunction<onFullscreenChangeEventDetail>否当视频进入和退出全屏时触发

event.detail = {fullScreen, direction}，direction取为 vertical 或 horizontal
onWaitingCommonEventFunction<onWaitingEventDetail>否当视频进入和退出全屏时触发

event.detail = {fullScreen, direction}，direction 取为 vertical 或 horizontal
onErrorCommonEventFunction否视频播放出错时触发
onProgressCommonEventFunction<onProgressEventDetail>否加载进度变化时触发，只支持一段加载
onLoadedMetaDataCommonEventFunction否视频元数据加载完成时触发。event.detail = {width, height, duration}
onControlsToggleCommonEventFunction<onControlsToggleEventDetail>否切换 controls 显示隐藏时触发。event.detail = {show}
onEnterPictureInPictureCommonEventFunction否播放器进入小窗
onLeavePictureInPictureCommonEventFunction否播放器退出小窗
onSeekCompleteCommonEventFunction否seek 完成时触发
nativePropsRecord<string, unknown>否用于透传 WebComponents 上的属性到内部 H5 标签上

API 支持度​

API微信小程序百度小程序支付宝小程序字节跳动小程序H5React Native
VideoProps.src✔️✔️✔️✔️✔️✔️
VideoProps.duration✔️✔️✔️(待定)✔️
VideoProps.controls✔️✔️✔️✔️✔️✔️
VideoProps.danmuList✔️✔️(待定)
VideoProps.danmuBtn✔️✔️(待定)
VideoProps.enableDanmu✔️✔️(待定)
VideoProps.autoplay✔️✔️✔️✔️✔️✔️
VideoProps.loop✔️✔️✔️✔️✔️✔️
VideoProps.muted✔️✔️✔️✔️✔️✔️
VideoProps.initialTime✔️✔️✔️✔️✔️✔️
VideoProps.direction✔️✔️✔️(待定)
VideoProps.showProgress✔️✔️(待定)
VideoProps.showFullscreenBtn✔️✔️✔️(待定)
VideoProps.showPlayBtn✔️✔️✔️(待定)
VideoProps.showCenterPlayBtn✔️✔️✔️(待定)✔️
VideoProps.enableProgressGesture✔️✔️✔️(待定)
VideoProps.objectFit✔️✔️✔️(待定)
VideoProps.poster✔️✔️✔️✔️✔️✔️
VideoProps.showMuteBtn✔️(待定)
VideoProps.title✔️(待定)
VideoProps.playBtnPosition✔️(待定)
VideoProps.enablePlayGesture✔️(待定)
VideoProps.autoPauseIfNavigate✔️(待定)
VideoProps.autoPauseIfOpenNative✔️(待定)
VideoProps.vslideGesture✔️✔️(待定)
VideoProps.vslideGestureInFullscreen✔️(待定)
VideoProps.adUnitId✔️
VideoProps.posterForCrawler✔️
VideoProps.showCastingButton✔️
VideoProps.pictureInPictureMode✔️
VideoProps.enableAutoRotation✔️
VideoProps.showScreenLockButton✔️
VideoProps.onPlay✔️✔️✔️✔️✔️✔️
VideoProps.onPause✔️✔️✔️✔️✔️✔️
VideoProps.onEnded✔️✔️✔️✔️✔️✔️
VideoProps.onTimeUpdate✔️✔️✔️✔️✔️✔️
VideoProps.onFullscreenChange✔️✔️✔️(待定)✔️
VideoProps.onWaiting✔️✔️(待定)
VideoProps.onError✔️✔️✔️✔️✔️✔️
VideoProps.onProgress✔️✔️(待定)
VideoProps.onLoadedMetaData✔️✔️
VideoProps.onControlsToggle✔️
VideoProps.onEnterPictureInPicture✔️
VideoProps.onLeavePictureInPicture✔️
VideoProps.onSeekComplete✔️
VideoProps.nativeProps✔️

direction​

direction 的合法值

参数说明
0正常竖向
90屏幕逆时针90度
-90屏幕顺时针90度

ObjectFit​

objectFit 的合法值

参数说明
contain包含
fill填充
cover覆盖

PlayBtnPosition​

playBtnPosition 的合法值

参数说明
bottomcontrols bar上
center视频中间

onTimeUpdateEventDetail​

参数类型说明
currentTimenumber当前时间
durationnumber持续时间

onFullscreenChangeEventDetail​

参数类型说明
directionnumber方向
fullScreennumber or boolean全屏

onWaitingEventDetail​

参数类型说明
directionnumber方向
fullScreennumber or boolean全屏

onProgressEventDetail​

参数类型说明
bufferednumber百分比

onControlsToggleEventDetail​

参数类型说明
showboolean是否显示