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在所有浏览器中实现此功能。

这是working example。

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

HTML5视频，提示点和停止点

2 个答案: