video播放器禁用or启用拖动进度条

做视频教育网站 客户提出一个需求: 视频学习完毕时,在观看视频能够拖动进度条.未观看完毕时,禁止拖动视频进度条,只能倍速播放;

用的插件的 videojs一开始用的是 disableProcess.js 插件,但是很快发现一个bug;

BUG:第一个视频播放时能够禁止拖动进度条,ok,这个没问题,当切换到第二个视频的时候,视频会出现卡死,然后控制台无限出现 this.videojs.disableProcess is not function 这个错误, 导致视频卡在这里,播放不了;

通过测试发现对于一个 video 的标签上面 disableProcess 插件的对进度条的处理只能够处理一次,不能够多次对同一个 video 标签处理;

最后想到一个办法 就是利用 css 的 pointerEvents 属性放在进度条的 css 样式上面

pointer-events是css3的一个属性，
指定在什么情况下元素可以成为鼠标事件的target（包括鼠标的样式）

通过添加pointerEvents属性来禁止鼠标的滑动

//禁用拖动
document.querySelector(".vjs-progress-control").style.pointerEvents ="none";
//启用拖动
document.querySelector(".vjs-progress-control").style.pointerEvents ="auto";

当然这个方法是没有 disableProcess.js 的插件效果好 但是在我的场景下是很好用的
手机全屏是 测试也是ok的;

最后附上disableProcess.js插件的内容，直接在html里面引入就行，会自动加入到videojs插件的

(function(vjs) {

  var
    /**
     * Copies properties from one or more objects onto an original.
     */
    extend = function(obj /*, arg1, arg2, ... */) {
      var arg, i, k;
      for (i = 1; i < arguments.length; i++) {
        arg = arguments[i];
        for (k in arg) {
          if (arg.hasOwnProperty(k)) {
            obj[k] = arg[k];
          }
        }
      }
      return obj;
    },

    // define some reasonable defaults for this sweet plugin
    defaults = {
      autoDisable: false
    },

    // plugin initializer
    disableProgress = function(options) {
      var
        // save a reference to the player instance
        player = this,
        state = false,

        // merge options and defaults
        settings = extend({}, defaults, options || {});

      // disable / enable methods
      player.controlProgress = {
        disable: function() {
            state = true;
            player.controlBar.progressControl.seekBar.off("mousedown");
            player.controlBar.progressControl.seekBar.off("touchstart");
            player.controlBar.progressControl.seekBar.off("click");
        },
        enable: function() {
            state = false;
            player.controlBar.progressControl.seekBar.on("mousedown",  player.controlBar.progressControl.seekBar.handleMouseDown);
            player.controlBar.progressControl.seekBar.on("touchstart", player.controlBar.progressControl.seekBar.handleMouseDown);
            player.controlBar.progressControl.seekBar.on("click", player.controlBar.progressControl.seekBar.handleClick);
        },
        getState: function(){
          return state;
        }
      };

      if(settings.autoDisable)
      {
        player.controlProgress.disable();
      }
    };

  // register the plugin with video.js
  vjs.plugin('disableProgress', disableProgress);

}(window.videojs));

使用

this.videojs.disableProgress(disable)

结束!