CODEWITHSUNDEEP
javascripthtmlvideo
David Berger
David Berger

Reputation: 756

Adding video to an HTML 5 Canvas using Easel.js

According to the documenatation you can pass an HTMLVideoElement to an Easel.js Bitmap. From the documentation

Bitmap ( image ) 
Parameters:
image <Image | HTMLCanvasElement | HTMLVideoElement> The Image, Canvas, or Video to render to the display list.

I have managed to get an image loaded and added to the canvas, so I know I have the library setup and code working but I can not figure out how to get the video added.

I can add a video tag and get the file to play outside of canvas and the framework and I can add the video directly to the canvas without using Easel by accessing the context so I know the video is good.

A few line of sample code would be greatly appreciated.

Upvotes: 1

Views: 4569

Answers (1)

igarciaoliver
igarciaoliver

Reputation: 73

In order to add video you need to add it to your DOM (the typical video tag on html5) and the pick that element on js and pass it as an argument to your Bitmap instance.

JS:

var introVideo =  document.getElementById("introVideo");
var bitmap =  new Bitmap (introVideo);
stage.addChild (bitmap);

HTML:

<video autoplay id="introVideo" style="display:none">
<source src="./videos/01_Intro.mp4" type="video/mp4" />
<source src="./videos/01_Intro.ogv" type="video/ogg" />
</video>

Hope it helps!

Upvotes: 3

Related Questions