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

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三个属性,分别表示一条弹幕的文字、字体颜色和出现时间(单位为秒)。

相关推荐
西岸行者5 天前
学习笔记:SKILLS 能帮助更好的vibe coding
笔记·学习
悠哉悠哉愿意5 天前
【单片机学习笔记】串口、超声波、NE555的同时使用
笔记·单片机·学习
别催小唐敲代码5 天前
嵌入式学习路线
学习
毛小茛5 天前
计算机系统概论——校验码
学习
babe小鑫5 天前
大专经济信息管理专业学习数据分析的必要性
学习·数据挖掘·数据分析
winfreedoms5 天前
ROS2知识大白话
笔记·学习·ros2
在这habit之下5 天前
Linux Virtual Server(LVS)学习总结
linux·学习·lvs
我想我不够好。5 天前
2026.2.25监控学习
学习
im_AMBER5 天前
Leetcode 127 删除有序数组中的重复项 | 删除有序数组中的重复项 II
数据结构·学习·算法·leetcode
CodeJourney_J5 天前
从“Hello World“ 开始 C++
c语言·c++·学习