video ☁️¶
1.0.0 新版功能: 低版本需做 兼容处理 。
2.3.0 新版功能: 支持云文件ID。
视频组件。相关api:wx.createVideoContext()
属性 |
类型 |
默认值 |
必填 |
说明 |
最低版本 |
|
---|---|---|---|---|---|---|
src |
string |
是 |
要播放视频的资源地址, |
|||
支持云文件ID(2.3.0) |
1.0.0 |
|||||
duration |
number |
否 |
指定视频时长 |
1.1.0 |
||
controls |
boolean |
true |
否 |
是否显示默认播放控件 |
||
(播放/暂停按钮、播放进度、时间) |
1.0.0 |
|||||
danmu-list |
Array.<object> |
否 |
弹幕列表 |
1.0.0 |
||
danmu-btn |
boolean |
false |
否 |
是否显示弹幕按钮, |
||
只在初始化时有效, |
||||||
不能动态变更 |
1.0.0 |
|||||
enable-danmu |
boolean |
false |
否 |
是否展示弹幕, |
||
只在初始化时有效, |
||||||
不能动态变更 |
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 |
|
page-gesture |
boolean |
false |
否 |
在非全屏模式下, |
||
是否开启亮度与音量调节手势 |
||||||
(废弃,见 vslide-gesture) |
1.6.0 |
|||||
direction |
number |
否 |
设置全屏时视频的方向, |
|||
不指定则根据宽高比自动判断 |
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 |
||
容器大小不一致时, |
||||||
视频的表现形式 |
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 |
否 |
播放按钮的位置 |
2.4.0 |
|
enable-play-gesture |
boolean |
false |
否 |
是否开启播放手势, |
||
即双击切换播放/暂停 |
2.4.0 |
|||||
auto-pause-if-navigate |
boolean |
true |
否 |
当跳转到其它小程序页面时, |
||
是否自动暂停本页面的视频 |
2.5.0 |
|||||
auto-pause-if-open-native |
boolean |
true |
否 |
当跳转到其它微信原生页面时, |
||
是否自动暂停本页面的视频 |
2.5.0 |
|||||
vslide-gesture |
boolean |
false |
否 |
在非全屏模式下,是否开启亮度 |
||
与音量调节手势 |
||||||
(同 page-gesture) |
2.6.2 |
|||||
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 |
direction 的合法值
值 |
说明 |
---|---|
0 |
正常竖向 |
90 |
屏幕逆时针90度 |
-90 |
屏幕顺时针90度 |
object-fit 的合法值
值 |
说明 |
---|---|
contain |
包含 |
fill |
填充 |
cover |
覆盖 |
play-btn-position 的合法值
值 |
说明 |
---|---|
bottom |
controls bar上 |
center |
视频中间 |
小技巧
<video> 默认宽度300px、高度225px,可通过wxss设置宽高。
小技巧
请注意原生组件使用限制
支持的格式
格式 |
iOS |
Android |
---|---|---|
mp4 |
√ |
√ |
mov |
√ |
x |
m4v |
√ |
x |
3gp |
√ |
√ |
avi |
√ |
x |
m3u8 |
√ |
√ |
webm |
x |
√ |
支持的编码格式
格式 |
iOS |
Android |
---|---|---|
H.264 |
√ |
√ |
HEVC |
√ |
√ |
MPEG-4 |
√ |
√ |
VP9 |
x |
√ |
示例代码
在开发者工具中预览效果
<view class="section tc">
<video src="{{src}}" controls></video>
<view class="btn-area">
<button bindtap="bindButtonTap">获取视频</button>
</view>
</view>
<view class="section tc">
<video
id="myVideo"
src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
danmu-list="{{danmuList}}"
enable-danmu
danmu-btn
controls
></video>
<view class="btn-area">
<button bindtap="bindButtonTap">获取视频</button>
<input bindblur="bindInputBlur" />
<button bindtap="bindSendDanmu">发送弹幕</button>
</view>
</view>
function getRandomColor() {
const rgb = []
for (let i = 0; i < 3; ++i) {
let color = Math.floor(Math.random() * 256).toString(16)
color = color.length == 1 ? '0' + color : color
rgb.push(color)
}
return '#' + rgb.join('')
}
Page({
onReady(res) {
this.videoContext = wx.createVideoContext('myVideo')
},
inputValue: '',
data: {
src: '',
danmuList: [
{
text: '第 1s 出现的弹幕',
color: '#ff0000',
time: 1
},
{
text: '第 3s 出现的弹幕',
color: '#ff00ff',
time: 3
}]
},
bindInputBlur(e) {
this.inputValue = e.detail.value
},
bindButtonTap() {
const that = this
wx.chooseVideo({
sourceType: ['album', 'camera'],
maxDuration: 60,
camera: ['front', 'back'],
success(res) {
that.setData({
src: res.tempFilePath
})
}
})
},
bindSendDanmu() {
this.videoContext.sendDanmu({
text: this.inputValue,
color: getRandomColor()
})
}
})