javascript - HTML5 ビデオ画像 / ポスターのフェード イン/アウト

Question

ビデオを開始すると、HTML5 ビデオ ポスター/oimage をフェードアウトし、ビデオを一時停止または停止すると再びフェードインすることは可能ですか?

通常、ポスター画像はビデオが開始されると直接非表示になり、ビデオをロード/停止すると直接表示されます

ポスター画像をキャンバスに複製して、ビデオの上に配置し、フェードアウトおよびフェードインすることはできますか?

既存のソリューション/スクリプトはありますか?

Answer 1

属性の動作は、タグ自体posterによって実際に駆動されます。<video>この画像の表示を開始する前に、あなたはそれを言っているだけです。ビデオ要素のカスタマイズと同様に、これには独自の要素を含める必要があります。基本的に、次のようになります。

<div class="video-container" style="position:relative">
    <video width="x" height="y"></video>
    <img style="position: absolute; top: 0; left: 0; bottom: 0; right: 0">
</div>

次に、たとえば Zepto を使用して、イベントをバインドする必要があります。

$('.video-container img').bind('click', function() {
    var $img = $(this),
        $vid = $img.parent().find('video');
    $img.animate({opacity: 0}, 1000, 'linear', function() {
        $img.css({visibility: 'hidden'});
        $vid[0].play();
    });
});

同様に、一時停止イベントをリッスンし、発生するとフェードインします。

とはいえ、これはおそらく次の 2 つの理由から悪い考えです。

1. これは、iOS や、スクリプトによる再生を防止するデバイスでは機能しない可能性があります。play()これらのデバイスでは、クリック イベント ハンドラー内でのみトリガーできます。1秒遅れてプレイしているので、実際にはコントロールできません。
2. デフォルトの機能を壊しています。ビデオを一時停止すると、別の瞬間を探したいと思うかもしれませんが、中断した場所を知りたいのは確かです。視覚的なキューがないことで、それがなくなります。

アップデート

iOS の問題を回避するのに役立つ別のアプローチを次に示します。この場合、実際にはクリックでビデオを開始します。つまり、フェード画像が再生中のビデオを覆う期間があるため、それはあなたの呼び出しです.

$('.video-container').each(function() {
    var $img = $(this).find('img'),
        $vid = $(this).find('vid');

    $img.bind('click', function() { $vid[0].play() });

    $vid.bind('play', function() {
        $img.animate({opacity: 0}, 1000, 'linear', function() {
            if($vid[0].playing) {
                $img.css({visibility: 'hidden'});
            }
        });
    });

    $vid.bind('pause ended', function() {
        $img.css({visibility: 'visible'});
        $img.animate({opacity: 1}, 1000, 'linear');
    });

});