1

HTML5 ビデオのキューポイントには、要素を Javascript でラップし、PopcornJS、CuepointsJS などを使用して、トラックに沿ってさまざまなタイミングで再生をトリガーする方法がいくつかあることを確認しました。

しかし、HTML5 ビデオのキューポイントだけでなく、トリガー ストップも可能にするものはありますか? たとえば、0:25 から 0:45 まで再生して 0:45 で停止するリンクをクリックして、1 つのビデオに沿って「チャプター」を設定したい場合はどうすればよいでしょうか。1 つの動画に複数のキューとストップを入れたいのですが、これを可能にするものはありますか?

前もって感謝します。

4

2 に答える 2

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));
};
于 2015-12-16T19:51:45.990 に答える
0

HTML5キューオブジェクトには、このための「pauseOnExit」というプロパティがあります。

この機能はChromeとOperaに実装されています。webshimsのようなポリフィルを使用して、この機能をすべてのブラウザーに実装できます。

これが実際の例です。

var cue = new TextTrackCue(0.5, 5, "My first Cue");
cue.pauseOnExit = true;
于 2013-03-07T07:31:49.293 に答える