0

I'm using EaselJS to render videos in HTML5 canvases this way:

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();
}

Don't pay too much attention to the JavaScript code. I've just synthesized to the basics I remember of my real code which is much more larger; it's just a reference to say that I'm rendering the video the EaselJS normal way given in many tutorials; so this snippet may not work but gives the idea. My real code works perfectly!

I just want to know if there's a way to just render a single frame of a video instead of playing it all.

I'm using many canvases for my application and when rendering all the videos needed (6 videos, 6 canvases) if not ultra slow, it slows down a little my app. I wish just to render a pre-visualization of the given video (some seconds of it) or just a single frame. It must be done with EaselJS as I have a lot of functional code done already.

halfer
  • 19,824
  • 17
  • 99
  • 186
Metafaniel
  • 29,318
  • 8
  • 40
  • 67

1 Answers1

1

to be honest I think it can hardly be done at the present time. I just deactivated the corresponding code-section in my application and simply overlayed the canvas on top of the video.

the main problem is, that the video sometimes does not update quickly enough after seeking and the fired events don't really help either - unless the video is playing. I ended up drawing lots of black screens to my canvas. Using some timeout to call the proprietary copy2canvas function helped a little but as soon as your system or network is a little bit to slow, things don't work again.

if you still want to try it, here is a tutorial: http://www.html5rocks.com/en/tutorials/video/basics/#toc-fun-canvas

Jörn Berkefeld
  • 2,540
  • 20
  • 31
  • Wow your answer it's somewhat dissapointing and useful of course u_u I thought it will be very easy but seems to be it's not =/ Anyway, I opened a thread in EaselJS Google Group yesterday http://bit.ly/M4aow2 in hopes someone has an answer. I'll try your tuto later when I have more time. THANKS =) – Metafaniel Jun 13 '12 at 20:59
  • I've also opened a new discussion in the CreateJS Support http://bit.ly/NBlqPt I wish someone has an answer 'cause it would be really useful =) – Metafaniel Jun 14 '12 at 17:54
  • In the above links, I've asked about this subject, however I didn't get an answer, just a plain "EaselJS doesn't have any explicit support for Video, sorry" from a staff member u.u So I guess yours it's the best answer... for now. Thanks =) – Metafaniel Sep 12 '12 at 14:05