Добавление видео в HTML 5 Canvas с помощью Easel.js

Question

Согласно документации вы можете передать HTMLVideoElement в растровое изображение Easel.js.Из документации

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

мне удалось загрузить изображение и добавить его на холст, поэтому я знаю, что у меня есть настройка библиотеки и работает код, но я не могу понять, как добавить видео.

Я могу добавить видео тег и получить файл для воспроизведения вне холста и каркаса, и я могу добавить видео непосредственно на холст без использования Easel, используя контекст, поэтому я знаю, что видео хорошее.

Несколько строк примера кода будут с благодарностью.

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>

Надеюсь, это поможет!