javascript - 如何为 HTML5 视频播放器创建偏移量插件

Question

我正在尝试创建一个偏移插件来在 HTML5 视频播放器中播放完整视频中的部分视频，该插件可用于 video.js videojs-offset plugin ，现在正在尝试将此插件转换为单独使用 HTML5 播放器

videojs offset插件来源

(function() {
    "use strict";
    var a = function(a) {
        var b;
        return this._offsetStart = a.start || 0, this._offsetEnd = a.end || 0, b = this.constructor, b.__super__ && b.__super__.__offsetInit || (b.__super__ = {
            __offsetInit: !0,
            duration: b.prototype.duration,
            currentTime: b.prototype.currentTime,
            bufferedPercent: b.prototype.bufferedPercent,
            remainingTime: b.prototype.remainingTime
        }, b.prototype.duration = function() {
            return this._offsetEnd > 0 ? this._offsetEnd - this._offsetStart : b.__super__.duration.apply(this, arguments) - this._offsetStart
        }, b.prototype.currentTime = function(a) {
            return void 0 !== a ? b.__super__.currentTime.call(this, a + this._offsetStart) - this._offsetStart : b.__super__.currentTime.apply(this, arguments) - this._offsetStart
        }, b.prototype.remainingTime = function() {
            var a = this.currentTime();
            return a < this._offsetStart && (a = 0), this.duration() - a
        }, b.prototype.startOffset = function() {
            return this._offsetStart
        }, b.prototype.endOffset = function() {
            return this._offsetEnd > 0 ? this._offsetEnd : this.duration()
        }), this.on("timeupdate", function() {
            var a = this.currentTime();
            0 > a && (this.currentTime(0), this.play()), this._offsetEnd > 0 && a > this._offsetEnd - this._offsetStart && (this.currentTime(this._offsetEnd - this._offsetStart), this.pause())
        }), this
    };
    a.VERSION = "0.0.0", window.vjsoffset = a, window.videojs.plugin("offset", a)
}).call(this);

我需要尝试什么方法才能单独使用 HTML5 视频播放器？

Answer 1

这似乎是您可以使用最少的代码轻松完成的事情。我建议写这样的东西:

function videoSegment(elementOrQuery, start, stop){
  
  var element = typeof elementOrQuery === 'string'
    ? document.querySelector(elementOrQuery) : elementOrQuery;
  
  element.currentTime = start;
  
  // While playing, check if time is within bounds
  element.addEventListener('timeupdate', function(){
    if(element.currentTime < start) element.currentTime = start;
    if(element.currentTime > stop) element.pause();
  });
  // When starting to play make sure its within bounds
  element.addEventListener('play', function(){
    if(element.duration > stop || element.duration < start) element.currentTime = start;
  });
  // When pausing, check if theres a loop and repeat or reset to beginning
  element.addEventListener('pause', function(){
    if(element.currentTime > stop) element.currentTime = start;
    if(element.loop) element.play();
  });
  
}

videoSegment('video', 2, 4);

<video controls autoplay loop>
  <source src="http://techslides.com/demos/sample-videos/small.mp4" />
</video>