Version: next

Video

视频。相关api:Taro.createVideoContext

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

参考文档

类型

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微信小程序百度小程序支付宝小程序字节跳动小程序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.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 的合法值

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

onTimeUpdateEventDetail

参数类型说明
currentTime
number
当前时间
duration
number
持续时间

onFullscreenChangeEventDetail

参数类型说明
direction
number
方向
fullScreen
number | boolean
全屏

onWaitingEventDetail

参数类型说明
direction
number
方向
fullScreen
number | boolean
全屏

onProgressEventDetail

参数类型说明
buffered
number
百分比

API 支持度

API微信小程序百度小程序支付宝小程序字节跳动小程序H5React Native
Video✔️✔️✔️✔️✔️