0

我怀疑肯定应该以某种方式完成，但我不知道如何，我将不胜感激；）我正在使用 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 完成，因为我已经完成了很多功能代码 =)

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

4

1 回答 1

1

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

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

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

于 2012-06-13T15:29:13.323 回答