重要参数
src 视频的地址
controls 是否显示默认的按钮(播放,暂停等),默认是开启,要设置为false才是禁止
autoplay 自动播放
loop 循环播放
muted 静音播放
show-mute-btn 显示静音按钮
enable-play-gesture 双击暂停
show-screen-lock-button 全屏显示锁屏按钮
bindplay 绑定播放事件
bindpause 绑定暂停事件
bindended 绑定末尾事件
bindtimeupdate 绑定进度变化
bindfullscreenchange 绑定进入和退出全屏
binderror 绑定出错
分析
可以看到,在小程序的视频播放中,能设置的项还是非常多的。
当然实际上,如果只是希望播放视频的话,那么只需要最前边几个简单的选项就可以了,后边很多属性并不会用到。
当然,只是这样说的话,我们没办法清楚的认识到这些属性有什么用,最好还是在小程序中实际测试一下。
这里我们需要找一个可以测试视频的地址试验一下,比如说这个地址
http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4
简单使用
注意:如果你是在开发者工具中进行调试的话,那么最好先勾选不校验合法域名
普通播放视频
<video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
循环自动静音播放
<video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" autoplay loop muted></video>
双击暂停,显示静音和锁屏
<video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" show-mute-btn enable-play-gesture show-screen-lock-button></video>
可以看到这些属性的使用都很简单,只需要正常添加就可以了。
视频统计播放量
比如说,我们可以这样做,通过bindended事件,只要视频播放完毕,那么就给播放量加1
wxml代码如下
<video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" bindended="video_end"></video>
<view>播放量:{{ t }}</view>
js代码如下
Page({
data: {
t: 0
},
onLoad: function (options) {
},
video_end(e){
this.setData({t: this.data.t + 1});
}
})
这是一种方法,但是问题也是比较明显的:
1,如果某用户看视频看到快结束但是还没结束的时候,就关掉了,不会统计在内。
2,如果某用户,直接将进度条拖动到最后,那么,一样可以算作播放完毕,从而可以刷播放。
当然,如果是某些网课,必须要播放到结束,才算学生完成任务的话,依然可以这样进行统计,只要禁止拖动进度条,必须从头到尾播放即可。
微信扫描下方的二维码阅读本文