版本：4.x

Video

视频。相关api：Taro.createVideoContext

支持情况：微信小程序百度小程序支付宝小程序抖音小程序 QQ 小程序京东小程序 React Native Harmony Harmony hybrid

参考文档

类型

ComponentType<VideoProps>

示例代码

React
Vue

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>
    )
  }
}

<template>
  <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"
    initial-time="0"
    :controls="true"
    :autoplay="false"
    :loop="false"
    :muted="false"
  />
</template>

VideoProps

参数	类型	默认值	必填	说明
src	`string`		是	要播放视频的资源地址
duration	`number`		否	指定视频时长
controls	`boolean`	`true`	否	是否显示默认播放控件（播放/暂停按钮、播放进度、时间）
danmuList	`any[]`		否	弹幕列表
danmuBtn	`boolean`	`false`	否	是否显示弹幕按钮，只在初始化时有效，不能动态变更
enableDanmu	`boolean`	`false`	否	是否展示弹幕，只在初始化时有效，不能动态变更
autoplay	`boolean`	`false`	否	是否自动播放
loop	`boolean`	`false`	否	是否循环播放
muted	`boolean`	`false`	否	是否静音播放
initialTime	`number`		否	指定视频初始播放位置
pageGesture	`boolean`	`false`	否	在非全屏模式下，是否开启亮度与音量调节手势
direction	`number`		否	设置全屏时视频的方向，不指定则根据宽高比自动判断。有效值为 0（正常竖向）, 90（屏幕逆时针90度）, -90（屏幕顺时针90度）
showProgress	`boolean`	`true`	否	若不设置，宽度大于240时才会显示
showFullscreenBtn	`boolean`	`true`	否	是否显示全屏按钮
showPlayBtn	`boolean`	`true`	否	是否显示视频底部控制栏的播放按钮
showCenterPlayBtn	`boolean`	`true`	否	是否显示视频中间的播放按钮
enableProgressGesture	`boolean`	`true`	否	是否开启控制进度的手势
objectFit	`keyof ObjectFit`	`"contain"`	否	当视频大小与 video 容器大小不一致时，视频的表现形式
poster	`string`		否	视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置 poster 无效
showMuteBtn	`boolean`	`false`	否	是否显示静音按钮
title	`string`		否	视频的标题，全屏时在顶部展示
playBtnPosition	`keyof PlayBtnPosition`	`'bottom'`	否	播放按钮的位置 - `bottom`: controls bar 上 - `center`: 视频中间
enablePlayGesture	`boolean`	`false`	否	是否开启播放手势，即双击切换播放/暂停
autoPauseIfNavigate	`boolean`	`true`	否	当跳转到其它小程序页面时，是否自动暂停本页面的视频
autoPauseIfOpenNative	`boolean`	`true`	否	当跳转到其它微信原生页面时，是否自动暂停本页面的视频
vslideGesture	`boolean`	`false`	否	在非全屏模式下，是否开启亮度与音量调节手势（同 `page-gesture`）
vslideGestureInFullscreen	`boolean`	`true`	否	在全屏模式下，是否开启亮度与音量调节手势
adUnitId	`string`		否	视频前贴广告单元ID，更多详情可参考开放能力视频前贴广告
posterForCrawler	`string`		否	用于给搜索等场景作为视频封面展示，建议使用无播放 icon 的视频封面图，只支持网络地址
showCastingButton	`boolean`		否	显示投屏按钮。只安卓且同层渲染下生效，支持 DLNA 协议
pictureInPictureMode	"" or "push" or "pop" or ("push" or "pop")[]		否	设置小窗模式： push, pop，空字符串或通过数组形式设置多种模式（如： ["push", "pop"]）
enableAutoRotation	`boolean`		否	是否开启手机横屏时自动全屏，当系统设置开启自动旋转时生效
showScreenLockButton	`boolean`		否	是否显示锁屏按钮，仅在全屏时显示，锁屏后控制栏的操作
showSnapshotButton	`boolean`		否	是否显示截屏按钮，仅在全屏时显示
showBackgroundPlaybackButton	`boolean`		否	是否展示后台音频播放按钮
backgroundPoster	`string`		否	进入后台音频播放后的通知栏图标（Android 独有）
nativeProps	`Record<string, unknown>`		否	用于透传 `WebComponents` 上的属性到内部 H5 标签上
showBottomProgress	`boolean`	`true`	否	是否展示底部进度条
pictureInPictureShowProgress	`string`		否	是否在小窗模式下显示播放进度
referrerPolicy	"origin" or "no-referrer"		否	格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html，其中 {appid} 为小程序的 appid，{version} 为小程序的版本号，版本号为 0 表示为开发版、体验版以及审核版本，版本号为 devtools 表示为开发者工具，其余为正式版本；
isDrm	`boolean`		否	是否是 DRM 视频源
provisionUrl	`string`		否	DRM 设备身份认证 url，仅 is-drm 为 true 时生效 (Android)
certificateUrl	`string`		否	DRM 设备身份认证 url，仅 is-drm 为 true 时生效 (iOS)
licenseUrl	`string`		否	DRM 获取加密信息 url，仅 is-drm 为 true 时生效
posterSize	`string`		否	当 poster 高宽比跟视频高宽不匹配时，如何显示 poster，设置规则同 background-size 一致。
showThinProgressBar	`string`		否	当底部工具条隐藏时，是否显示细进度条（controls=false 时设置无效）。
mobilenetHintType	`number`		否	移动网络提醒样式。 0 - 不提醒 1 - tip 提醒 2 - 阻塞提醒(无消耗流量大小) 3 - 阻塞提醒(有消耗流量大小提醒)
floatingMode	`string`		否	浮窗设置。暂时不支持全局浮窗。可选值： none：无浮窗。 page：页面内浮窗。
showNoWifiTip	`string`		否	非 wifi 环境下是否显示继续播放浮层
showLockBtn	`string`		否	全屏模式下，是否显示锁屏按钮
showRateBtn	`string`		否	是否显示倍速播放按钮
showVslideBtnInFullscreen	`string`		否	全屏模式下，是否显示侧边栏控制按钮
silentPlay	`string`		否	是否进入无声视频模式，进入无声视频模式后，视频将静音播放且不响应系统物理音量变化，点击播放器提示无声视频，手势调节失效
preRollUnitId	`string`		否	前贴广告的 unit id
postRollUnitId	`string`		否	后贴广告的 unit id
showPlaybackRateBtn	`string`		否	是否显示倍速控件，点击倍速控件后可选择倍速，可选值： 0.75/1.0/1.25/1.5/2
enablePlayInBackground	`string`		否	video 播放时宿主退出后台后开启小窗播放，iOS 14 及以上版本支持。开启时首次退出后台后给予弹窗提示用户授权，授权完成后可以到小程序「设置」中重设。支持场景见后台小窗播放
signature	`string`		否	设置署名水印
preferredPeakBitRate	`number`		否	指定码率上界，单位为比特每秒
isLive	`boolean`		否	是否为直播源
definition	`string`		否	清晰度，设置清晰度列表和默认播放的清晰度。切换清晰度按钮仅在全屏时展示，属性说明详见 Definition 类型说明。需要保证 src 和 definition 中有一个为必填，若同时设置了 src 和 definition，definition 优先级高于 src
onPlay	`CommonEventFunction`		否	当开始/继续播放时触发 play 事件
onPause	`CommonEventFunction`		否	当暂停播放时触发 pause 事件
onEnded	`CommonEventFunction`		否	当播放到末尾时触发 ended 事件
onTimeUpdate	`CommonEventFunction<onTimeUpdateEventDetail>`		否	播放进度变化时触发, 触发频率 250ms 一次
onFullscreenChange	`CommonEventFunction<onFullscreenChangeEventDetail>`		否	当视频进入和退出全屏时触发
onWaiting	`CommonEventFunction<onWaitingEventDetail>`		否	视频出现缓冲时触发
onError	`CommonEventFunction`		否	视频播放出错时触发
onProgress	`CommonEventFunction<onProgressEventDetail>`		否	加载进度变化时触发，只支持一段加载
onLoadedMetaData	`CommonEventFunction<onLoadedMetaDataEventDetail>`		否	视频元数据加载完成时触发
onEnterPictureInPicture	`CommonEventFunction`		否	播放器进入小窗
onLeavePictureInPicture	`CommonEventFunction`		否	播放器退出小窗
onSeekComplete	`CommonEventFunction`		否	seek 完成时触发
onFullScreenChange	`CommonEventFunction<onFullscreenChangeEventDetail>`		否	视频进入和退出全屏时触发
onControlsToggle	`CommonEventFunction<onControlsToggleEventDetail>`		否	切换 controls 显示隐藏时触发。
onLoading	`CommonEventFunction`		否	视频出现缓冲时触发。
onTap	`CommonEventFunction<onTapEventDetail>`		否	点击视频 view 时触发
onUserAction	`CommonEventFunction<onUserActionEventDetail>`		否	用户操作事件
onStop	`CommonEventFunction`		否	视频播放终止。
onRenderStart	`CommonEventFunction`		否	当视频加载完真正开始播放时触发。
onAdStart	`CommonEventFunction<onAdTypeCommonEventDetail>`		否	贴片广告开始播放时触发
onAdEnded	`CommonEventFunction<onAdTypeCommonEventDetail>`		否	贴片广告播放结束时触发
onAdClose	`CommonEventFunction<onAdTypeCommonEventDetail>`		否	贴片广告非自然结束时触发，如：用户关闭广告或广告播放过程中 video 组件被销毁
onAdError	`CommonEventFunction<onAdTypeCommonEventDetail>`		否	贴片广告加载失败时触发
onPlayBackRateChange	`CommonEventFunction<{ playbackRate: string; }>`		否	视频倍速改变完成时触发。返回改变后的倍速值
onMuteChange	`CommonEventFunction<{ isMuted: boolean; }>`		否	静音状态改变完成时触发。返回当前是否静音
onControlTap	`CommonEventFunction<{ controlType: any; }>`		否	点击控件时触发。返回当前点击的控件类型
onEnterBackground	`CommonEventFunction`		否	进入小窗播放时触发
onCloseBackground	`CommonEventFunction`		否	关闭小窗播放时触发
onLeaveBackground	`CommonEventFunction`		否	离开小窗进入 app 事件时触发
onLoadedData	`CommonEventFunction`		否	否
onLoadStart	`CommonEventFunction`		否	否
onSeeked	`CommonEventFunction`		否	否
onSeeking	`CommonEventFunction`		否	否
onAdLoad	`CommonEventFunction`		否	贴片广告加载成功时触发，event.detail = { adType: 'preRollAd' or 'postRollAd' }
onCastingUserSelect	`CommonEventFunction`		否	用户选择投屏设备时触发 detail = { state: "success"/"fail" }
onCastingStateChange	`CommonEventFunction`		否	投屏成功/失败时触发 detail = { type, state: "success"/"fail" }
onCastingInterrupt	`CommonEventFunction`		否	投屏被中断时触发

API 支持度

API	微信小程序	百度小程序	支付宝小程序	抖音小程序	QQ 小程序	京东小程序	H5	React Native	Harmony 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 的合法值

参数	说明
bottom	controls bar上
center	视频中间

onTimeUpdateEventDetail

参数	类型	说明
currentTime	`number`	当前时间
duration	`number`	持续时间
userPlayDuration	`number`	用户实际观看时长
videoDuration	`number`	视频总时长

API 支持度

API	微信小程序	支付宝小程序	H5	React Native	Harmony
onTimeUpdateEventDetail.userPlayDuration		✔️
onTimeUpdateEventDetail.videoDuration		✔️

onFullscreenChangeEventDetail

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

onWaitingEventDetail

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

onProgressEventDetail

参数	类型	说明
buffered	`number`	百分比

onLoadedMetaDataEventDetail

参数	类型	说明
width	`number`	视频宽度
height	`number`	视频高度
duration	`number`	持续时间

onControlsToggleEventDetail

参数	类型	说明
show	`boolean`	是否显示

onTapEventDetail

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

onUserActionEventDetail

参数	类型	说明
tag	`string`	用户操作的元素
value	`number`

UserActionTag

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

onAdTypeCommonEventDetail

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

类型​

示例代码​

VideoProps​

API 支持度​

direction​

ObjectFit​

PlayBtnPosition​

onTimeUpdateEventDetail​

API 支持度​

onFullscreenChangeEventDetail​

onWaitingEventDetail​

onProgressEventDetail​

onLoadedMetaDataEventDetail​

onControlsToggleEventDetail​

onTapEventDetail​

onUserActionEventDetail​

UserActionTag​

onAdTypeCommonEventDetail​

类型

示例代码

VideoProps

API 支持度

direction

ObjectFit

PlayBtnPosition

onTimeUpdateEventDetail

API 支持度

onFullscreenChangeEventDetail

onWaitingEventDetail

onProgressEventDetail

onLoadedMetaDataEventDetail

onControlsToggleEventDetail

onTapEventDetail

onUserActionEventDetail

UserActionTag

onAdTypeCommonEventDetail