HTML5視頻，提示點和停止點

Question

我已經看到，通過在Javascript中包裝元素並在PopcornJS，CuepointsJS等軌道的不同時間觸發播放HTML5視頻的提示點有幾個解決方案。

但是那裏有什麼東西不僅允許在HTML5視頻提示點，但也觸發停止？比如，如果我想在一個視頻中設置「章節」，我可以點擊一個鏈接播放0:25到0:45並在0:45停止播放？我想要有多個提示並停在1個視頻中，有什麼可以讓這成爲可能嗎？

在此先感謝。

Answer 1

爲此，HTML5提示對象具有名爲'pauseOnExit'的屬性。

該功能在Chrome和Opera中實現。您可以使用像webshims這樣的polyfill在所有瀏覽器中實現此功能。

這是working example。

var cue = new TextTrackCue(0.5, 5, "My first Cue"); 
cue.pauseOnExit = true; 

Answer 2

這是我用來處理提示點的一些相對簡單的代碼。它住在這個要點（https://gist.github.com/positlabs/30605eccf05375da14f1）

/* 

    // mapping cues to methods 
    var cuepointMethods = { 
     "1": function(){}, 
     "2.82": function(){}, 
     "3.31": function(){} 
    }; 

    // instantiate with <video>, and an array of cuepoint times => [1, 2.82, 3.31] 
    var cp = new CuePoints(document.querySelector('#video'), Object.keys(cuepointMethods)); 

    // listen for cue event 
    cp.on('cue', function(cue){ 
     // do something with the cue 
     // in this example, we map the cue to a method 
     cuepointMethods[cue](); 
    }); 

*/ 


window.CuePoints = function(video, cuepoints){ 

    this.video = video; 
    this.cuepoints = cuepoints; 

    video.addEventListener('play', this._onPlayVideo.bind(this)); 
    if(!video.paused) this._onPlayVideo(); 
}; 

// https://www.npmjs.com/package/backbone-events-standalone 
CuePoints.prototype = BackboneEvents.mixin({}); 

CuePoints.prototype._onPlayVideo = function(){ 
    this._prevTime = this.video.currentTime; 
    // start animationframe 
    this._onFrame(); 
}; 

CuePoints.prototype._onFrame = function(){ 
    // only fire cue events if video is playing. Might not be wanted in some cases... 
    if(this.video.paused) return; 

    this.cuepoints.forEach(function(cuepoint){ 
     if(cuepoint >= this._prevTime && cuepoint < this.video.currentTime){ 
      this.trigger('cue', cuepoint); 
     } 
    }.bind(this)); 

    this._prevTime = this.video.currentTime; 
    requestAnimationFrame(this._onFrame.bind(this)); 
};