Video
视频。相关api:Taro.createVideoContext
类型
ComponentType<VideoProps>
示例代码
export default class PageView extends Component {
constructor() {
super(...arguments)
}
render() {
return (
<View className='components-page'>
<Video
src='https://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400'
controls={true}
autoplay={false}
poster='https://misc.aotu.io/booxood/mobile-video/cover_900x500.jpg'
initialTime='0'
id='video'
loop={false}
muted={false}
/>
</View>
)
}
}
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 | "contain" | "fill" | "cover" | "contain" | 否 | 当视频大小与 video 容器大小不一致时,视频的表现形式 |
poster | string | 否 | 视频封面的图片网络资源地址,如果 controls 属性值为 false 则设置 poster 无效 | |
showMuteBtn | boolean | false | 否 | 是否显示静音按钮 |
title | string | 否 | 视频的标题,全屏时在顶部展示 | |
playBtnPosition | "bottom" | "center" | '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 协议 | |
onPlay | BaseEventOrigFunction<any> | 否 | 当开始/继续播放时触发 play 事件 | |
onPause | BaseEventOrigFunction<any> | 否 | 当暂停播放时触发 pause 事件 | |
onEnded | BaseEventOrigFunction<any> | 否 | 当播放到末尾时触发 ended 事件 | |
onTimeUpdate | BaseEventOrigFunction<onTimeUpdateEventDetail> | 否 | 播放进度变化时触发, 触发频率 250ms 一次 event.detail = {currentTime, duration} | |
onFullscreenChange | BaseEventOrigFunction<onFullscreenChangeEventDetail> | 否 | 当视频进入和退出全屏时触发 event.detail = {fullScreen, direction},direction取为 vertical 或 horizontal | |
onWaiting | BaseEventOrigFunction<onWaitingEventDetail> | 否 | 视频出现缓冲时触发 event.detail = {fullScreen, direction},direction 取为 vertical 或 horizontal | |
onError | BaseEventOrigFunction<any> | 否 | 视频播放出错时触发 | |
onProgress | BaseEventOrigFunction<onProgressEventDetail> | 否 | 加载进度变化时触发,只支持一段加载 | |
onLoadedMetaData | BaseEventOrigFunction<any> | 否 | 视频元数据加载完成时触发。event.detail = {width, height, duration} |
API 支持度
API | 微信小程序 | 百度小程序 | 支付宝小程序 | 抖音小程序 | H5 | React 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.onPlay | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | |
VideoProps.onPause | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | |
VideoProps.onEnded | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | |
VideoProps.onTimeUpdate | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | |
VideoProps.onFullscreenChange | ✔️ | ✔️ | ✔️ | (待定) | ||
VideoProps.onWaiting | ✔️ | ✔️ | (待定) | |||
VideoProps.onError | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | |
VideoProps.onProgress | ✔️ | ✔️ | (待定) | |||
VideoProps.onLoadedMetaData | ✔️ |
direction
direction 的合法值
参数 | 说明 |
---|---|
0 | 正常竖向 |
90 | 屏幕逆时针90度 |
-90 | 屏幕顺时针90度 |
objectFit
objectFit 的合法值
参数 | 说明 |
---|---|
contain | 包含 |
fill | 填充 |
cover | 覆盖 |
playBtnPosition
playBtnPosition 的合法值
参数 | 说明 |
---|---|
bottom | controls bar上 |
center | 视频中间 |
onTimeUpdateEventDetail
参数 | 类型 | 说明 |
---|---|---|
currentTime | number | 当前时间 |
duration | number | 持续时间 |
onFullscreenChangeEventDetail
参数 | 类型 | 说明 |
---|---|---|
direction | number | 方向 |
fullScreen | number | boolean | 全屏 |
onWaitingEventDetail
参数 | 类型 | 说明 |
---|---|---|
direction | number | 方向 |
fullScreen | number | boolean | 全屏 |
onProgressEventDetail
参数 | 类型 | 说明 |
---|---|---|
buffered | number | 百分比 |
API 支持度
API | 微信小程序 | 百度小程序 | 支付宝小程序 | 抖音小程序 | H5 | React Native |
---|---|---|---|---|---|---|
Video | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |