|
微信小程序视频播放和h5的video标签相同， 格式为:<video></video>. 其相关属性及其图文信息解析如下： 按钮相关： controls 显示默认播放控件（播放/暂停按钮、播放进度、时间） autoplay 自动播放 如果加上这个属性，包括弹幕在内的信息自动也自动显示 弹幕相关： danmu-btn 显示控制弹幕按钮 enable-danmu 显示弹幕信息 danmu-list=“{{danmulist}}” 定义弹幕显示信息 绑定函数相关： bindplay=“bindplay” 绑定开始播放按钮，以及继续播放函数 bindpause=“bindpause” 暂停播放触发函数 bindended=“bindended” 播放结束触发函数 bindtimeupdate=“bindtimeupdate” 播放中触发函，一般是获取当前播放到时间以秒为单位：event.detail .currentTime 其他： objectFit=“contain/fill/cover” 当视频大小和video元素大小不一致时,contain：包含(默认)，fill：填充，cover：覆盖 video标签的默认的宽度300px、高度225px src="{{src}}" 视频播放地址  例子如下： wxml: 1 2 3 4 5 | <view >
<video class='video' src="{{src}}" autoplay danmu-btn enable-danmu controls danmu-list="{{danmuList}}"
bindplay='bindplay' bindpause='bindpause' bindended='bindend' bindtimeupdate="bindtimeupdate"
></video>
</view>
|
wxjs: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | Page({
data: {
src: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',
danmuList: [
{
text: '第 1s 出现的弹幕',
color: '#ff0000',
time: 1
},
{
text: '第 3s 出现的弹幕',
color: '#ff00ff',
time: 3
}]
},
bindplay:function(){
console.log("开始播放")
},
bindpause:function(){
console.log("停止播放")
},
bindend:function(){
console.log("播放结束")
},
bindtimeupdate:function(res){
console.log(res)
console.log("播放到第"+res.detail.currentTime+"秒")
}
})
|
效果： video标签的元素设为width:100%后 
| 
转播
