javascript - HTML5 视频、提示点和停止点

Question

我已经看到有一些 HTML5 视频提示点的解决方案，方法是将元素包装在 Javascript 中，并使用 PopcornJS、CuepointsJS 等在轨道上的不同时间触发播放。

但是有什么东西不仅可以在 HTML5 视频上设置提示点，而且还可以触发停止？就像我想在一个视频中设置“章节”一样，我点击一个播放 0:25 到 0:45 并在 0:45 停止的链接怎么办？我想在 1 个视频中包含多个提示和停止，有什么可以让这成为可能吗？

提前致谢。

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 提示对象为此有一个名为“ pauseOnExit ”的属性。

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

这是一个工作示例。

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