在 CreateJS 中加载视频的最简单方法是什么？答案

【问题标题】：Easiest way to load a video in CreateJS?在 CreateJS 中加载视频的最简单方法是什么？
【发布时间】：2015-05-09 17:58:41
【问题描述】：

我希望通过 CreateJS (Flash CC) 加载 mp4 或 ogg 格式的视频。最简单的方法是什么？那里几乎没有文档。我知道视频可以作为位图上传，例如：

 var bitmap = new createjs.Bitmap("moviePath.mp4");

当我以这种方式加载视频时，我可以听到播放的音频，但实际上看不到画布上的视频。我怀疑这是因为画布没有绘制每个单独的帧，尽管放置了ticker函数和stage.update()

感谢任何帮助！

【问题讨论】：

有一个带有 CreateJS 的 VideoLoader，它可以加载基于 HTMLMediaElement 的视频和音频。这是在 PreloadJS 0.6.0 中引入的。

标签： javascript canvas html5-canvas easeljs createjs

【解决方案1】：

我认为您应该为此使用DOMelement。假设你使用的是 jQuery，你可以尝试这样的事情：

var videoDom = $('<video width="320" height="240" autoplay><source src="movie.mp4" type="video/mp4"></video>').appendTo(document.body)[0];
var cjsVideo = new createjs.DOMElement(videoDom);
stage.addChild(cjsVideo);

【讨论】：

【解决方案2】：

您可以像往常一样将它们放在 DOM 中并通过 CSS display:none 隐藏它们

<video class="js-video" preload="auto" autoplay style="display:none;">
<source src="/videos/video.mp4" type="video/mp4">
<source src="/videos/video.webm" type="video/webm">
</video>

之后只需通过 jQuery（或原生 JS）选择它并将其传递给 Bitmap 实例。

var bitmap = new createjs.Bitmap($('.js-video')[0]);

如果您不对视频应用任何遮罩/过滤器等，最好使用上面提到的普通 DOMElement。

【讨论】：