重要参数
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,如果某用户,直接将进度条拖动到最后,那么,一样可以算作播放完毕,从而可以刷播放。

当然,如果是某些网课,必须要播放到结束,才算学生完成任务的话,依然可以这样进行统计,只要禁止拖动进度条,必须从头到尾播放即可。



微信扫描下方的二维码阅读本文

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注