Easel.jsを使用してHTML 5キャンバスにビデオを追加する

Question

ドキュメントによると、HTMLVideoElementをEasel.jsのビットマップに渡すことができます。ドキュメント

Bitmap (image) 
Parameters: 
image <Image | HTMLCanvasElement | HTMLVideoElement> The Image, Canvas, or Video to render to the display list. 

から私はイメージロードされ、キャンバスに追加を取得するために管理しているので、私は、私は、ライブラリのセットアップとコードが機能して知っているが、私はビデオを追加取得する方法を見つけ出すことはできません。

私はビデオタグを追加して、キャンバスとフレームワークの外で再生するファイルを取得できます。私はビデオが良いことを知っているので、コンテキストにアクセスして、イーゼルを使わずにビデオをキャンバスに直接追加できます。

サンプルコードの数行は非常に高く評価されます。

Answer 1

ビデオを追加するには、それをDOM（html5の標準的なビデオタグ）に追加し、jsのその要素を選択してBitmapインスタンスの引数として渡す必要があります。

JS：

var introVideo = document.getElementById("introVideo"); 
var bitmap = new Bitmap (introVideo); 
stage.addChild (bitmap); 

HTML：

<video autoplay id="introVideo" style="display:none"> 
<source src="./videos/01_Intro.mp4" type="video/mp4" /> 
<source src="./videos/01_Intro.ogv" type="video/ogg" /> 
</video> 

はそれが役に立てば幸い！