跳到主要内容
版本：4.x

Video

视频。相关api：Taro.createVideoContext

支持情况：

参考文档

类型​

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否是否显示锁屏按钮，仅在全屏时显示，锁屏后控制栏的操作
showSnapshotButtonboolean否是否显示截屏按钮，仅在全屏时显示
showBackgroundPlaybackButtonboolean否是否展示后台音频播放按钮
backgroundPosterstring否进入后台音频播放后的通知栏图标（Android 独有）
nativePropsRecord<string, unknown>否用于透传 WebComponents 上的属性到内部 H5 标签上
showBottomProgressbooleantrue否是否展示底部进度条
pictureInPictureShowProgressstring否是否在小窗模式下显示播放进度
referrerPolicy"origin" or "no-referrer"否格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html，其中 {appid} 为小程序的 appid，{version} 为小程序的版本号，版本号为 0 表示为开发版、体验版以及审核版本，版本号为 devtools 表示为开发者工具，其余为正式版本；
isDrmboolean否是否是 DRM 视频源
provisionUrlstring否DRM 设备身份认证 url，仅 is-drm 为 true 时生效 (Android)
certificateUrlstring否DRM 设备身份认证 url，仅 is-drm 为 true 时生效 (iOS)
licenseUrlstring否DRM 获取加密信息 url，仅 is-drm 为 true 时生效
posterSizestring否当 poster 高宽比跟视频高宽不匹配时，如何显示 poster，设置规则同 background-size 一致。
showThinProgressBarstring否当底部工具条隐藏时，是否显示细进度条（controls=false 时设置无效）。
mobilenetHintTypenumber否移动网络提醒样式。

0 - 不提醒
1 - tip 提醒
2 - 阻塞提醒(无消耗流量大小)
3 - 阻塞提醒(有消耗流量大小提醒)
floatingModestring否浮窗设置。暂时不支持全局浮窗。
可选值：

none：无浮窗。
page：页面内浮窗。
showNoWifiTipstring否非 wifi 环境下是否显示继续播放浮层
showLockBtnstring否全屏模式下，是否显示锁屏按钮
showRateBtnstring否是否显示倍速播放按钮
showVslideBtnInFullscreenstring否全屏模式下，是否显示侧边栏控制按钮
silentPlaystring否是否进入无声视频模式，进入无声视频模式后，视频将静音播放且不响应系统物理音量变化，点击播放器提示无声视频，手势调节失效
preRollUnitIdstring否前贴广告的 unit id
postRollUnitIdstring否后贴广告的 unit id
showPlaybackRateBtnstring否是否显示倍速控件，点击倍速控件后可选择倍速，可选值： 0.75/1.0/1.25/1.5/2
enablePlayInBackgroundstring否video 播放时宿主退出后台后开启小窗播放，iOS 14 及以上版本支持。开启时首次退出后台后给予弹窗提示用户授权，授权完成后可以到小程序「设置」中重设。支持场景见后台小窗播放
signaturestring否设置署名水印
preferredPeakBitRatenumber否指定码率上界，单位为比特每秒
isLiveboolean否是否为直播源
definitionstring否清晰度，设置清晰度列表和默认播放的清晰度。切换清晰度按钮仅在全屏时展示，属性说明详见 Definition 类型说明。需要保证 src 和 definition 中有一个为必填，若同时设置了 src 和 definition，definition 优先级高于 src
onPlayCommonEventFunction否当开始/继续播放时触发 play 事件
onPauseCommonEventFunction否当暂停播放时触发 pause 事件
onEndedCommonEventFunction否当播放到末尾时触发 ended 事件
onTimeUpdateCommonEventFunction<onTimeUpdateEventDetail>否播放进度变化时触发, 触发频率 250ms 一次
onFullscreenChangeCommonEventFunction<onFullscreenChangeEventDetail>否当视频进入和退出全屏时触发
onWaitingCommonEventFunction<onWaitingEventDetail>否视频出现缓冲时触发
onErrorCommonEventFunction否视频播放出错时触发
onProgressCommonEventFunction<onProgressEventDetail>否加载进度变化时触发，只支持一段加载
onLoadedMetaDataCommonEventFunction<onLoadedMetaDataEventDetail>否视频元数据加载完成时触发
onEnterPictureInPictureCommonEventFunction否播放器进入小窗
onLeavePictureInPictureCommonEventFunction否播放器退出小窗
onSeekCompleteCommonEventFunction否seek 完成时触发
onFullScreenChangeCommonEventFunction<onFullscreenChangeEventDetail>否视频进入和退出全屏时触发
onControlsToggleCommonEventFunction<onControlsToggleEventDetail>否切换 controls 显示隐藏时触发。
onLoadingCommonEventFunction否视频出现缓冲时触发。
onTapCommonEventFunction<onTapEventDetail>否点击视频 view 时触发
onUserActionCommonEventFunction<onUserActionEventDetail>否用户操作事件
onStopCommonEventFunction否视频播放终止。
onRenderStartCommonEventFunction否当视频加载完真正开始播放时触发。
onAdStartCommonEventFunction<onAdTypeCommonEventDetail>否贴片广告开始播放时触发
onAdEndedCommonEventFunction<onAdTypeCommonEventDetail>否贴片广告播放结束时触发
onAdCloseCommonEventFunction<onAdTypeCommonEventDetail>否贴片广告非自然结束时触发，如：用户关闭广告或广告播放过程中 video 组件被销毁
onAdErrorCommonEventFunction<onAdTypeCommonEventDetail>否贴片广告加载失败时触发
onPlayBackRateChangeCommonEventFunction<{ playbackRate: string; }>否视频倍速改变完成时触发。返回改变后的倍速值
onMuteChangeCommonEventFunction<{ isMuted: boolean; }>否静音状态改变完成时触发。返回当前是否静音
onControlTapCommonEventFunction<{ controlType: any; }>否点击控件时触发。返回当前点击的控件类型
onEnterBackgroundCommonEventFunction否进入小窗播放时触发
onCloseBackgroundCommonEventFunction否关闭小窗播放时触发
onLeaveBackgroundCommonEventFunction否离开小窗进入 app 事件时触发
onLoadedDataCommonEventFunction否否
onLoadStartCommonEventFunction否否
onSeekedCommonEventFunction否否
onSeekingCommonEventFunction否否
onAdLoadCommonEventFunction否贴片广告加载成功时触发，event.detail = { adType: 'preRollAd' or 'postRollAd' }
onCastingUserSelectCommonEventFunction否用户选择投屏设备时触发 detail = { state: "success"/"fail" }
onCastingStateChangeCommonEventFunction否投屏成功/失败时触发 detail = { type, state: "success"/"fail" }
onCastingInterruptCommonEventFunction否投屏被中断时触发

API 支持度​

API微信小程序百度小程序支付宝小程序抖音小程序QQ 小程序京东小程序H5React NativeHarmonyHarmony hybrid
VideoProps.src✔️✔️✔️✔️✔️✔️✔️✔️✔️
VideoProps.duration✔️✔️✔️✔️✔️✔️
VideoProps.controls✔️✔️✔️✔️✔️✔️✔️✔️✔️
VideoProps.danmuList✔️✔️✔️✔️✔️
VideoProps.danmuBtn✔️✔️✔️✔️✔️
VideoProps.enableDanmu✔️✔️✔️✔️✔️
VideoProps.autoplay✔️✔️✔️✔️✔️✔️✔️✔️✔️
VideoProps.loop✔️✔️✔️✔️✔️✔️✔️✔️✔️
VideoProps.muted✔️✔️✔️✔️✔️✔️✔️✔️✔️
VideoProps.initialTime✔️✔️✔️✔️✔️✔️✔️✔️✔️
VideoProps.pageGesture✔️✔️✔️
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.showSnapshotButton✔️
VideoProps.showBackgroundPlaybackButton✔️
VideoProps.backgroundPoster✔️
VideoProps.nativeProps✔️✔️
VideoProps.showBottomProgress✔️
VideoProps.pictureInPictureShowProgress✔️
VideoProps.referrerPolicy✔️
VideoProps.isDrm✔️
VideoProps.provisionUrl✔️
VideoProps.certificateUrl✔️
VideoProps.licenseUrl✔️
VideoProps.posterSize✔️
VideoProps.showThinProgressBar✔️
VideoProps.mobilenetHintType✔️✔️
VideoProps.floatingMode✔️
VideoProps.showNoWifiTip✔️
VideoProps.showLockBtn✔️
VideoProps.showRateBtn✔️
VideoProps.showVslideBtnInFullscreen✔️
VideoProps.silentPlay✔️
VideoProps.preRollUnitId✔️
VideoProps.postRollUnitId✔️
VideoProps.showPlaybackRateBtn✔️
VideoProps.enablePlayInBackground✔️
VideoProps.signature✔️
VideoProps.preferredPeakBitRate✔️
VideoProps.isLive✔️
VideoProps.definition✔️
VideoProps.onPlay✔️✔️✔️✔️✔️✔️✔️✔️✔️
VideoProps.onPause✔️✔️✔️✔️✔️✔️✔️✔️✔️
VideoProps.onEnded✔️✔️✔️✔️✔️✔️✔️✔️✔️
VideoProps.onTimeUpdate✔️✔️✔️✔️✔️✔️✔️✔️✔️
VideoProps.onFullscreenChange✔️✔️✔️✔️
VideoProps.onWaiting✔️✔️✔️✔️✔️
VideoProps.onError✔️✔️✔️✔️✔️✔️✔️✔️✔️
VideoProps.onProgress✔️✔️✔️✔️✔️
VideoProps.onLoadedMetaData✔️✔️✔️✔️✔️
VideoProps.onEnterPictureInPicture✔️
VideoProps.onLeavePictureInPicture✔️
VideoProps.onSeekComplete✔️✔️
VideoProps.onFullScreenChange✔️✔️✔️✔️✔️✔️
VideoProps.onControlsToggle✔️✔️
VideoProps.onLoading✔️
VideoProps.onTap✔️
VideoProps.onUserAction✔️
VideoProps.onStop✔️
VideoProps.onRenderStart✔️
VideoProps.onAdStart✔️
VideoProps.onAdEnded✔️
VideoProps.onAdClose✔️
VideoProps.onAdError✔️
VideoProps.onPlayBackRateChange✔️
VideoProps.onMuteChange✔️
VideoProps.onControlTap✔️
VideoProps.onEnterBackground✔️
VideoProps.onCloseBackground✔️
VideoProps.onLeaveBackground✔️
VideoProps.onLoadedData✔️
VideoProps.onLoadStart✔️
VideoProps.onSeeked✔️
VideoProps.onSeeking✔️
VideoProps.onAdLoad✔️
VideoProps.onCastingUserSelect✔️
VideoProps.onCastingStateChange✔️
VideoProps.onCastingInterrupt✔️

direction​

direction 的合法值

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

ObjectFit​

objectFit 的合法值

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

PlayBtnPosition​

playBtnPosition 的合法值

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

onTimeUpdateEventDetail​

参数类型说明
currentTimenumber当前时间
durationnumber持续时间
userPlayDurationnumber用户实际观看时长
videoDurationnumber视频总时长

API 支持度​

API微信小程序支付宝小程序H5React NativeHarmony
onTimeUpdateEventDetail.userPlayDuration✔️
onTimeUpdateEventDetail.videoDuration✔️

onFullscreenChangeEventDetail​

参数类型说明
direction"vertical" or "horizontal"方向
fullScreennumber or boolean全屏

onWaitingEventDetail​

参数类型说明
direction"vertical" or "horizontal"方向
fullScreennumber or boolean全屏

onProgressEventDetail​

参数类型说明
bufferednumber百分比

onLoadedMetaDataEventDetail​

参数类型说明
widthnumber视频宽度
heightnumber视频高度
durationnumber持续时间

onControlsToggleEventDetail​

参数类型说明
showboolean是否显示

onTapEventDetail​

参数类型
ptInView{ x: number; y: number; }

onUserActionEventDetail​

参数类型说明
tagstring用户操作的元素
valuenumber

UserActionTag​

参数说明
play底部播放按钮
centerplay中心播放按钮
mute静音按钮
fullscreen全屏按钮
retry重试按钮
mobilenetplay网络提醒的播放按钮

onAdTypeCommonEventDetail​

参数类型说明
adType"preRollAd" or "postRollAd"广告类型