小程序-video/视频播放---part1:属性及部分函数

按钮相关：

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+"秒")//查看正在播放时间，以秒为单位     } })