html5ビデオインタラクティブオブジェクト

Question

html5ビデオがタイムラインに接続されたボタン、メニューなどのオブジェクトを許可するかどうかは知りませんか？

Youtube flash playerこれを行う：特定の瞬間に、定義された秒間、ビデオ上にオブジェクト（バナー、リンク、コメント）を表示します。

おかげ

Answer 1

はいといいえ、 それはHTML5のビデオオブジェクトしかし、それを使用して非常にインタラクティブなビデオベースのプレゼンテーションを作成することが可能ですビデオオブジェクトそのものだけではありません。ビデオをキャンバスオブジェクトにネストし、実際のビデオイメージフレームを混乱させることができます。ビジュアルhtml要素をビデオオブジェクトの上にオーバーレイしてアニメートしたり、ボタンでビデオ再生をコントロールしたり、イベントをクリックしたりできます。時間ベースのリスナーを使用してビデオオブジェクトでページの残りの部分を制御することもできます。

Popcorn.jsは実際には本当に良くて、覚えやすいので、あなたが言ったことのすべてを行うことができます。 http://popcornjs.org

http://popcornjs.org/demos

Answer 2

それはHTML5のビデオ規格の一部ではないのですが、それはprogressイベントにいくつかのスクリプトを配線することによって、手動で実装するのは簡単です。ビデオオブジェクトのcurrentTimeプロパティを見ることで、追加の要素の表示/非表示の時期を決めることができます。

ビデオに1と2秒の間の映像の上に素子を示す

例：

<video id="v">...</div> 
<div id="overlay" style="position: relative; top: -80px;">HELLO</div> 

<script type="text/javascript"> 
    var overlay= document.getElementById('overlay'); 
    var video= document.getElementById('v'); 
    video.addEventListener('progress', function() { 
     var show= video.currentTime>=1 && video.currentTime<2; 
     overlay.style.visibility= show? 'visible' : 'hidden'; 
    }, false); 
</script> 

Answer 3

X2TV（www.x2.tv）あなたはHTML5層内のアイコンや追加コンテンツをオーバーレイすることができ、ドラッグ＆ドロップのスタジオを持っています。

Answer 4

もっと一般的なフレームワークを使用したい場合はhttps://github.com/nise/vi-twoが面白いかもしれません。