HTML5视频、提示点和停止点

Question

我已经看到，对于HTML5视频的提示点，有几种解决方案，它们将元素包装在Javascript中，并使用PopcornJS、CuepointsJS等在不同的时间触发播放。

但是有没有什么东西既可以在HTML5视频上使用提示点，也可以触发停止呢？比如，如果我想在一个视频中设置“章节”，点击一个播放0:25到0:45并在0:45停止的链接，该怎么办？我想要有多个线索和停止沿着一个视频，有什么可以做到这一点吗？

提前谢谢。

Answer 1

下面是我用来处理提示点的一些相对简单的代码。它生活在这个要点中(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));
};

Answer 2

HTML5 cue对象有一个名为'pauseOnExit‘的属性。

此功能在Chrome和Opera中实现。您可以使用webshims之类的polyfill在所有浏览器中实现此功能。

这是一个working example。

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