video.js禁止拖拽进度条

话不多说,直接上代码:

这里需要用到一下 js ,大家可以按照以下方法操作:

  1. 引入 videojs.disableProgress.js ,直接复制下面的代码就行。【网上是没有的,这是从老外那里翻看到的,所谓知识无国界,哈哈哈!!!】
/*
 * disableProgress
 * https://github.com/SadwickR/videojs-disable-ui
 *
 * Copyright (c) 2013 Ryan Sadwick
 * Licensed under the MIT license.
 */

(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.disableProgress = {
        disable: function() {
            state = true;
            player.controlBar.progressControl.seekBar.off("mousedown");
            player.controlBar.progressControl.seekBar.off("mouseup");
            player.controlBar.progressControl.seekBar.off("touchstart");
            player.controlBar.progressControl.seekBar.off("touchend");
            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("mouseup",  player.controlBar.progressControl.seekBar.handleMouseUp);
            player.controlBar.progressControl.seekBar.on("touchstart", player.controlBar.progressControl.seekBar.handleMouseDown);
            player.controlBar.progressControl.seekBar.on("touchend", player.controlBar.progressControl.seekBar.handleMouseUp);
            player.controlBar.progressControl.seekBar.on("click", player.controlBar.progressControl.seekBar.handleClick);
        },
        getState: function(){
          return state;
        }
      };

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

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

}(window.videojs));

2、开始自己的代码,一下三行代码即可,若果是多个 video 或者是 audio,请看我的这个文章:点击产看:video.js 获取多个 video 和多个 audio 的长度以及播放时长

// save a reference to the video element
  video = document.querySelector('video'),

  // save a reference to the video.js player for that element
  player = videojs(video);

  // initialize the plugin, passing in autoDisable
  player.disableProgress({
    autoDisable: true
  });
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐