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>

希望它有所帮助！

使用Easel.js将视频添加到HTML 5 Canvas

1 个答案: