《微信小程序开发从入门到实战》学习九十九

 

7.4 视频组件

7.4.1 video组件

支持属性属性如下：

属性	类型	默认值	说明	最低版本
src（必填）	string		要播放视频的资源地址，基础库2.3.0版本开始支持云文件ID	1.0.0
controls	boolean	true	是否显示默认播放控件（播放/暂停按钮、播放进度、时间）	1.0.0
enable-danmu	boolean	false	是否展示弹幕，只在初始化时有效，不能动态变更	1.0.0
danmu-btn	boolean	false	是否显示弹幕按钮，只在初始化时有效，不能动态变更	1.0.0
danmu-list	Object[]		弹幕列表	1.0.0
autoplay	boolean	false	是否自动播放	1.0.0
loop	boolean	false	是否循环播放	1.4.0
muted	boolean	false	是否静音播放	1.4.0
initial-time	number	0	指定视频初始播放位置	1.6.0
direction	number		设置全屏时视频的方向，不指定则根据宽高比自动判断,可选值及其含义如下： 0：正常竖向 90：屏幕逆时针90度 -90：屏幕顺时针90度	1.7.0
show-progress	boolean	true	若不设置，宽度大于240时才会显示	1.9.0
show-fullscreen-btn	boolean	true	是否显示全屏按钮	1.9.0
show-play-btn	boolean	true	是否显示视频底部控制栏的播放按钮	1.9.0
show-center-play-btn	boolean	true	是否显示视频中间的播放按钮	1.9.0
enable-progress-gesture	boolean	true	是否开启控制进度的手势	1.9.0
object-fit	string	contain	当视频大小与 video 容器大小不一致时，视频的表现形式，可选值及其含义如下： contain：包含 fill：填充 cover：覆盖	1.0.0
poster	string		视频封面的图片网络资源地址或云文件ID（2.3.0）。若 controls 属性值为 false 则设置 poster 无效	1.0.0
show-mute-btn	boolean	false	是否显示静音按钮	2.4.0
title	string		视频的标题，全屏时在顶部展示	2.4.0
play-btn-position	string	bottom	播放按钮的位置，可选值及其含义如下： bottom：controls bar上 center：视频中间	2.4.0
enable-play-gesture	boolean	false	是否开启播放手势，即双击切换播放/暂停	2.4.0
autp-pause-if-navigate	boolean	true	当跳转到本小程序的其他页面时，是否自动暂停本页面的视频播放	2.5.0
autp-pause-if-open-native	boolean	true	当跳转到其它微信原生页面时，是否自动暂停本页面的视频	2.5.0
page-gesture	boolean	false	在非全屏模式下，是否开启亮度与音量调节手势（废弃，见 vslide-gesture）	1.6.0
vslide-gesture	boolean	false	在非全屏模式下，是否开启亮度与音量调节手势（同 page-gesture）	1.6.0
vslide-gesture-in-fullscreen	boolean	true	在全屏模式下，是否开启亮度与音量调节手势	2.6.2
bindplay	eventhandle		当开始/继续播放时触发play事件	1.0.0
bindpause	eventhandle		当暂停播放时触发 pause 事件	1.0.0
bindended	eventhandle		当播放到末尾时触发 ended 事件	1.0.0
bindtimeupdate	eventhandle		播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次	1.0.0
bindfullscreenchange	eventhandle		视频进入和退出全屏时触发，event.detail = {fullScreen, direction}，direction 有效值为 vertical 或 horizontal	1.4.0
bindwaiting	eventhandle		视频出现缓冲时触发	1.7.0
binderror	eventhandle		视频播放出错时触发	1.7.0
bindprogress	eventhandle		加载进度变化时触发，只支持一段加载。event.detail = {buffered}，百分比	2.4.0

enable-danmu、danmu-btn和danmu-list属性分别用于设置是否显示弹幕、是否显示弹幕开关和弹幕列表。danmu-list属性需要传入一个数组，数组中的每一项都是一个Object类型的值，包含text、color和time三个属性，分别表示一条弹幕的文字、字体颜色和出现时间（单位为秒）。

​