3

再生中のHTML5動画の中に広告画像を挿入する方法を考えています。HTML5は初めてです。したがって、この機能を含める方法を実際に思いつくことはできません。

ビデオの長さが1分の場合。36秒でビデオを停止し、この画像を5秒間表示して、自動的にビデオに移動できるはずです。

この機能のためのライブラリまたは他のビルド済みのセットアップはありますか？

4

3 に答える 3

3

これは、HTML5ビデオAPIを介して実現できます。基本的には、36秒目にビデオを一時停止し、画像をオーバーレイしてから、5秒後に画像を削除して、ビデオを再度再生します。

これを行う方法の例を次に示します。

var video; // acquire video

function PerformCheck() {
    var curTime = parseInt(video.currentTime, 10);
    if (curTime < 36) {
        setTimeout(PerformCheck, 200);
    } else {
        video.pause();
        PlayCommercial();
    }
}

function PlayCommercial() {
    // TODO: Display image overlay
    setTimeout(ResumeVideo, 5000);
}

function ResumeVideo() {
    // TODO: Remove image overlay
    video.play();
}

したがって、上記の例では、ビデオが開始されたらチェックの実行を開始します。ユーザーがそれを行う場合は、ビデオイベントをサブスクライブします。

video.onplay = PerformCheck();
于 2012-10-03T13:58:56.740 に答える
3

JavaScriptを使用して実行できないことは事実上ありません。
いくつかの提案：
Javascriptを使用して、を使用してタイマーt1（36Sec）を開始しsetTimeout();ます。
次に、コールバック関数で、 1） （OR）同様の方法
を使用してビデオを一時停止します。 2）CSSを変更して画像を表示し、2番目のタイマーt2（5Sec）を開始すると、画像のCSSがinvisible / display：noneに戻ります 。3）これを使用してビデオを再生/再開し ます。これは単なるキックスターターです。残りの宿題をしなければなりません！StackOverflowは、必要な情報を収集し、少なくともある程度まで試してみることをお勧めします document.getElementById('myvideotag').pause();

document.getElementById('myvideotag').play();


于 2012-10-03T14:05:32.917 に答える
1

私は次の方法で問題を解決すると思います（最初の試みとして）：

  1. ビデオタグを作成し、JavaScriptコードを使用してビデオタグを参照します。
  2. キャンバスを作成し、その中にビデオコンテンツを描画してから、広告画像を保持する別のキャンバスを作成します。希望する時間に、最初のキャンバスコンテンツの上に2番目のキャンバスコンテンツを描画します。

コードは次のようになります。

var startTime = Date.now();
$(function () {
    var canvas = document.getElementById('canvas');
    var canvas2 = document.createElement('canvas');    
    canvas2.setAttribute('id', 'canvas2');
    var ctx = canvas.getContext('2d');
    var ctx2 = canvas2.getContext('2d');
    var img = new Image();
    img.src = "...";
    img.onload = function() {
        ctx2.drawImage(img);
    }

    var video = document.getElementById('video');

    video.addEventListener('play', function () {
        var $this = this; //cache
        (function loop() {
            var currentTime = Date.now() - startTime;
            if (!$this.paused && !$this.ended) {
                if (currentTime > 3600)  {
                    ctx.drawImage(canvas2, 0, canvas.height - 100);
                } else {
                    document.removeElementById('canvas2');
                }                    

                ctx.drawImage($this, 0, 0);
                setTimeout(loop, 1000 / 30); // drawing at 30fps
            }
        })();
    }, 0);
});
​

プロセスに関するhtml5doctorで、完全に説明された素晴らしい記事を見つけました。しかし、私は彼らの解決策をチェックしませんでした。提供された解決策は完全ではありません。私は問題にどのように取り組むかという基本的な考えだけをスケッチします。

于 2012-10-03T14:14:27.730 に答える