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

标签 javascript html video

根据文档,您可以将 HTMLVideoElement 传递给 Easel.js 位图。来自文档

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

我已经设法加载图像并将其添加到 Canvas 中,所以我知道我的库设置和代码可以正常工作,但我不知道如何添加视频。

我可以添加一个视频标签并让文件在 Canvas 和框架之外播放,我可以通过访问上下文将视频直接添加到 Canvas 而无需使用 Easel,所以我知道视频是好的。

如果能提供几行示例代码,我们将不胜感激。

最佳答案

为了添加视频,您需要将它添加到您的 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>

希望对您有所帮助!

关于javascript - 使用 Easel.js 将视频添加到 HTML 5 Canvas,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8059351/

相关文章:

javascript - 从代码隐藏中打开确认对话框

javascript - 如何根据先前的输入类型范围值创建 'x' 数量的输入类型文本?

css - div 在所有带 z-index 的东西前面

javascript - 使用 javascript 移动 css 缩放的 div

iphone - 从 HTML + UIWebView 下载视频

javascript - 使用 jquery 不允许在文本框中重复输入

javascript - 理解 React 中 array.map() 范围的问题

HTML CSS 悬停按钮导航

video - 如何在视频上从右上到右下垂直滑动水印文字

video - FFmpeg 的 AAC ("libfaac") 编解码器选项?