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正常方式的视频;所以这个片段可能不起作用，但给你的想法。我的真实代码完美无缺！

我只是想知道你们是否知道如何渲染视频的单帧而不是全部播放。

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

有人可以开导我吗？感谢很多=）

Answer 1

说实话，我认为现在很难做到。我刚刚在我的应用程序中停用了相应的代码部分，只是将画布覆盖在视频顶部。

主要问题是，视频有时在搜索后没有足够快地更新，并且被解雇的事件也没有真正帮助 - 除非视频正在播放。我最终在画布上画了很多黑色的画面。使用一些超时来调用专有的copy2canvas函数会有所帮助，但只要你的系统或网络有点慢，就不会再有用了。

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

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

1 个答案: