Skip to main content
Version: 3.x

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播放器退出小窗
onSeekCompleteCommonEventFunctionseek 完成时触发
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是否显示