使用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> 

希望它能帮助！