create.js in AnimateCC HTML 5 Canvas Project

[Dave-Bartlett]

I am working on what will hopefully be my first create.js project in Animate CC at my current employer.

I am trying to load in a .mp4 into a Bitmap object, using

HTML5ElementForVideo = document.createElement('video');
HTML5ElementForVideo.src = 'bridge-animation-resized-794x652.mp4';
HTML5ElementForVideo.autoplay = false;
video = new createjs.Bitmap(HTML5ElementForVideo);
video.x = 110.00;
video.y = 42.5;
stage.addChild(video);

..which works okay, and as expected.  In the video, there are a series of steps which we would like the user to be able to go between, using "Previous" and "Next" step buttons.

I assumed that navigation wise, I would be able to use something along the lines of:

{the instance}.gotoAndPlay(x)

To move to the right frame in the video.  However, this does not seem to work or be supported?  I only seem to be able to play the video or stop it with .play and .pause?

Any suggestions, please?

Dave

[kglad]

after enough video is loaded, try:

HTML5ElementForVideo.currentTime = whatever

[Dave-Bartlett]

Thank you for the pointer, I've used that to effectively "rewind" a section of video.  I assumed that the CreateJS libraries in Animate CC would provide all the functionality directly.  Now I know that some times  I will need to refer elsewhere, its clearer.

Dave

[ClayUUID]

Is there a specific reason why you're piping the video through a bitmap object?

If your video is going to be hosted on a server that doesn't support proper video streaming or HTTP "accept-ranges" headers, you're only going to be able to skip to parts of the video that have already downloaded. If that's the case, it may be best to split the video up into separate files for each segment.

Also, seeking isn't going to work at all until the browser has received the metadata for the file. You shouldn't be allowing any interaction with the video until both the "loadedmetada" and "canplay" events have fired on the video object.

Media events - Web developer guides | MDN

[Dave-Bartlett]

To be honest, from what I've read on various forums and Google searches, adding the video as a Bitmap object is the only way to be able to add an additional layer on top of it?  What we need to do is to be able to draw highlights and interactive hotspots on top of the video for the user to be to navigate to different frames / pages.

The documentation that is around seems a little vague - unless it's just me, never having attempted to use CreateJS for any other projects.

Dave

[kglad]

if you use the canvas video component you should be able to place objects above your video.

[Colin Holgate]

That would be other DOM objects, wouldn't it? The need here is to add animations on top of the video.

Would Clay's answer here be a solution?:

Re: How to put animation over video in HTML5 canvas

[kglad]

lol, this is kind of a circular thread.  did ClayUUID​ forget their work-around from the thread you linked?

[Colin Holgate]

I see that OP here had code that was similar, but in Clay's version he said to use bmp.video = vid. Without that the video would layer on top, I imagine?

[ClayUUID]

I only asked if there was a reason why he was using a Bitmap object. Since there is, my curiosity is satisfied.