Skip to main content
yigit14
Participant
Mar 24, 2017 12:37 PM UTC
Answered

How to put animation over video in HTML5 canvas

Hello, i have a project similar jibjab, basically people will upload their face photo and their face will replace in the video. Because of mobile platforms popularity i want do this project mobile friendly.

-I created HTML5 canvas on Adobe Animate CC 2017

-Added video from components

-Opened Actionscript 3 document, added video as flv embed, put head png and track manually the original head.

-Copy paste the head png with layer to HTML5 canvas but couldnt success.

(I have done this with Actionscript 3 helloyigit.com/deneme)

My question is:

How can i do this project efficiently with HTML5 and show user as a video? Also head animation and video must sync %100

This topic is closed to new replies. Start a new post to keep the conversation going.
ClayUUIDCorrect answer
Legend
Mar 24, 2017 1:08 PM UTC

You can't put canvas elements on top of video, because the video actually exists in a div layer floating above the canvas. The only way around this, theoretically, is to pipe the video from an offscreen video element into a Bitmap object.

javascript - Adding video to an HTML 5 Canvas using Easel.js - Stack Overflow

As for syncing, should be possible by monitoring the video's time code.

Syncing Content With HTML5 Video – Smashing Magazine

6 replies

Participant
Apr 20, 2017 10:32 AM UTC

The video loads so  $this._element.attach($('#dom_overlay_container'));  in JS

After insert z-ndex в <canvas> and <div id='dom_overlay_container'>

And remove backgound color from <canvas>

Translate
Participant
Aug 2, 2017 5:03 PM UTC

Thank you, this is an easy way out that works.

Translate
ClayUUIDCorrect answer
Legend
Mar 24, 2017 1:08 PM UTC

You can't put canvas elements on top of video, because the video actually exists in a div layer floating above the canvas. The only way around this, theoretically, is to pipe the video from an offscreen video element into a Bitmap object.

javascript - Adding video to an HTML 5 Canvas using Easel.js - Stack Overflow

As for syncing, should be possible by monitoring the video's time code.

Syncing Content With HTML5 Video – Smashing Magazine

Translate
Legend
Mar 24, 2017 7:34 PM UTC

So I figured I'd verify my own advice, and came up with this simple function. Seems to work fine on desktop Windows IE, Firefox, and Chrome.

// accepts target clip to create bitmap in, file path to video

// returns reference to bitmap object, with access to video element via "video" property

function makeBitmapVideo(clip, path) {

    var vid = document.createElement("video");

    vid.src = path;

    var bmp = clip.addChild(new createjs.Bitmap(vid));

    bmp.video = vid;

    return bmp;

}

An example of how to use it:

var myClip = makeBitmapVideo(this, "placeholder.mp4");

myClip.video.play();

myClip.rotation = 45;

Note that apparently this will not work on an iPad: Putting Video on Canvas

That's Apple for ya. Kill off the Flash plugin, then half-a** support the thing that's supposed to replace it.

Translate
yigit14
yigit14Author
Participant
Mar 24, 2017 9:25 PM UTC

Thank you very much ClayUUID for advice, all these codes i have to add on actions layer 1 frame or need to do something different? Can you please help me about steps that i have to follow?

Translate