主要功能

1. 控制播放、暂停、设置视频封面图
2. 设定初始化播放在第几秒
3. 控制视频的播放总长度
4. 控制是否显示弹幕功能
5. 禁止控制进度的手势
6. 禁止视频快进

video参数详解

• poster 视频封面图
• id video元素的ID值
• src 视频的路径地址
• duration 控制视频播放总长度
• initial-time 视频初始播放时间
• show-play-btn 是否显示视频底部控制栏的播放按钮
• show-progress 是否显示播放进度条
• bindtimeupdate 监听视频播放时的动作
• binderror 视频播放出错时触发
• danmu-list 弹幕列表
• enable-progress-gesture 是否开启控制进度的手势
• enable-danmu 是否展示弹幕
• danmu-btn 是否显示弹幕按钮
• controls 是否显示默认播放控件（播放/暂停按钮、播放进度、时间）

控制进度条快进功能详解

小程序官方文档没有提供是否可以控制快进的属性，现在的需求是在观看课程的过程中不允许快进，那么如何实现这个功能呢？

1、取消控制进度的手势，这样在操作屏幕的时候就无法进行快进（但是此时还是可以通过播放进度条来进行快进）

2、设定一个遮罩层，将视频中的播放进度遮住，这样用户就无法进行操作，详见代码参考

wxml

wxss

.cover-view {
  position: absolute;
  bottom: 0%;
  left: 13%;
  width:72%;
  height:120rpx;
}

当播放100秒时，提供使用打卡成功 功能详解

js

bindtimeupdate:function(e){
    console.log(e)
    var that = this;
    var now_time = e.detail.currentTime;//获取当前播放第几秒
    if(now_time>=100){//如果当前播放时长大于等于100秒，视频暂停同时可以进行自定义操作
      that.bindPause();
      that.setData({
        controls:false
      })
    }
},

弹幕功能详解

1、发送弹幕

bindSendDanmu: function () {
    this.videoContext.sendDanmu({
      text: this.inputValue,
      color: getRandomColor()
    })
},

2、弹幕列表

danmuList:
[{
  text: '第 1s 出现的弹幕',
  color: '#ff0000',
  time: 1
},
 {
   text: '第 3s 出现的弹幕',
   color: '#ff00ff',
   time: 3
 },
 {
   text: '第 10s 出现的弹幕',
   color: '#ff00ff',
   time: 10
 },
 {
   text: '第 20s 出现的弹幕',
   color: '#ff00ff',
   time: 20
 }],

以上就是我在开发当中用到的简易视频播放器，大家有其他的需求可以在评论区留言谈论。

有需要我这套源码的可以私信我。