Video

视频

属性及支持度

属性名类型默认值说明
srcString要播放视频的资源地址
controlsBooleantrue是否显示默认播放控件(播放/暂停按钮、播放进度、时间)
autoplayBooleanfalse是否自动播放
posterString视频封面的图片网络资源地址,如果 controls 属性值为 false 则设置 poster 无效
initialTimeNumber指定视频初始播放位置
loopBooleanfalse是否循环播放
mutedBooleanfalse是否静音播放
onPlayEventHandle当开始/继续播放时触发 play 事件
onPauseEventHandle当暂停播放时触发 pause 事件
onEndedEventHandle当播放到末尾时触发 ended 事件
onTimeUpdateEventHandle播放进度变化时触发。触发频率 250ms 一次
onErrorEventHandle视频播放出错时触发
autoPauseIfNavigateBooleantrue当跳转到其它小程序页面时,是否自动暂停本页面的视频
autoPauseIfOpenNativeBooleantrue当跳转到其它微信原生页面时,是否自动暂停本页面的视频
directionNumber设置全屏时视频的方向,不指定则根据宽高比自动判断
titleString视频的标题,全屏时在顶部展示
danmuBtnBooleanfalse是否显示弹幕按钮,只在初始化时有效,不能动态变更
danmuListArray <object>[]弹幕列表
durationNumber指定视频时长
enableDanmuBooleanfalse是否展示弹幕,只在初始化时有效,不能动态变更
enablePlayGestureBooleanfalse是否开启播放手势,即双击切换播放/暂停
enableProgressGestureBooleantrue是否开启控制进度的手势
objectFitStringcontain当视频大小与 video 容器大小不一致时,视频的表现形式
onFullscreenChangeEventHandle视频进入和退出全屏时触发,event.detail = {fullScreen, direction},direction 有效值为 vertical 或 horizontal
onProgressEventHandle加载进度变化时触发,只支持一段加载。event.detail = {buffered},百分比
onWaitingEventHandle视频出现缓冲时触发
playBtnPositionStringbottom播放按钮的位置
showCenterPlayBtnBooleantrue是否显示视频中间的播放按钮
showFullscreenBtnBooleantrue是否显示全屏按钮
showMuteBtnBooleanfalse是否显示静音按钮
showPlayBtnBooleantrue是否显示视频底部控制栏的播放按钮
showProgressBooleantrue若不设置,宽度大于240时才会显示
vslideGestureBooleanfalse在非全屏模式下,是否开启亮度与音量调节手势(同 pageGesture)
vslideGestureInFullscreenBooleantrue在全屏模式下,是否开启亮度与音量调节手势

各端支持度

属性名H5ReactNative微信小程序百度小程序支付宝小程序字节跳动小程序
srcx
controlsx
autoplayx
posterx
initialTimex
loopx
mutedx
onPlayx
onPausex
onEndedx
onTimeUpdatex
onErrorx
autoPauseIfNavigate待定xxxx
autoPauseIfOpenNative待定xxxx
direction待定xxx
title待定xxxx
danmuBtn待定xxx
danmuList待定xxx
duration待定xx
enableDanmu待定xxx
enablePlayGesture待定xxxx
enableProgressGesture待定xx
objectFit待定xx
onFullscreenChange待定xx
onProgress待定xxx
onWaiting待定xxx
playBtnPosition待定xxxx
showCenterPlayBtn待定xx
showFullscreenBtn待定xx
showMuteBtn待定xxxx
showPlayBtn待定xx
showProgress待定xxx
vslideGesture待定xxx
vslideGestureInFullscreen待定xxxx

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

其他相关属性请看各小程序官方文档

示例:
  1. import Taro, { Component } from '@tarojs/taro'
  2. import { View, Video } from '@tarojs/components'
  3. export default class PageView extends Component {
  4. constructor() {
  5. super(...arguments)
  6. }
  7. render() {
  8. return (
  9. <View className='components-page'>
  10. <Video
  11. src='http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400'
  12. controls={true}
  13. autoplay={false}
  14. poster='http://misc.aotu.io/booxood/mobile-video/cover_900x500.jpg'
  15. initialTime='0'
  16. id='video'
  17. loop={false}
  18. muted={false}
  19. />
  20. </View>
  21. )
  22. }
  23. }