使用 EaselJS 在 HTML5 画布中渲染单个帧或视频的给定部分

Question

我怀疑肯定应该以某种方式完成，但我不知道如何，我将不胜感激；） 我正在使用 EaselJS 以这种方式在 HTML5 画布中呈现视频：

HTML

<div>
  <canvas id="terminal1" width="140" height="82">
  <video id="video1" loop="true" width="127" height="70" autoplay="true" src="/url/to/video.mp4"> 
  <source  type="video/mp4"/> 
  </video>
</div>

Javascript

function init() {
  stage = new Stage(document.getElementById("cnvs_images"));
  var videoTag = document.getElementById('videoTag');
  video = new Bitmap(videoTag);
  video.visible = true;
  terminal1 = new Stage(document.getElementById('terminal1'));
  stage.addChild(video);
}

function tick() {
  stage.update();
  stage_terminal1.update();
}

请不要太注意 Javascript 代码...我只是综合了我记得的基础知识，我的真实代码要大得多；这只是一个参考，说我正在以许多教程中给出的 EaselJS 正常方式渲染视频；所以这个 sn-p 可能不起作用，但会给你这个想法。我的真实代码完美运行！

我只是想知道你们是否知道一种只渲染视频的单帧而不是全部播放的方法。

我在我的应用程序中使用了许多画布，当渲染所有需要的视频（6 个视频，6 个画布）时，如果不是超慢的话，它会减慢我的应用程序的速度。我只想渲染给定视频的预可视化（几秒钟）或只是一个帧。它必须用 EaselJS 完成，因为我已经完成了很多功能代码 =)

有人可以请教我吗？ 非常感谢 =)

Answer 1

说实话，我认为目前很难做到。我刚刚在我的应用程序中停用了相应的代码部分，并简单地将画布覆盖在视频之上。

主要问题是，视频有时在搜索后更新速度不够快，并且触发的事件也无济于事 - 除非视频正在播放。我最终在画布上画了很多黑屏。使用一些超时来调用专有的 copy2canvas 函数会有所帮助，但是一旦您的系统或网络有点慢，事情就不会再工作了。

如果你还想尝试，这里有一个教程：http://www.html5rocks.com/en/tutorials/video/basics/#toc-fun-canvas