Video in Canvas Will not play WITHOUT undefined object errors

347 views Asked by At

I have run into a rather strange situation while trying to build a HTML5 Video player using the new Adobe Flash HTML5 Canvas projects.

I have added the video to the canvas in flash, however the video only plays if there is an uncaught reference error. If there is no error the video will not play in the canvas.

I am wondering if anyone has any insight into why this may be happening or if you have a better way to add video to this flash Canvas project.

I have included all of my code below.

this.stop();
var mainStage = this;

var movieWidth = 640;//Choose Scaled Width of Video
var movieHeight = 360;//Choose Scaled Height of Video
var autoplayVideo = true;//Make it Autoplay

var vidya = document.createElement('video');//Creates the Video Element that is referenced later

var canvasEle = document.getElementById('canvas');//Identify the Canvas element
ctx = canvasEle.getContext('2d');//get canvas's context

canvasEle.parentNode.insertBefore(vidya, canvasEle);//insert video element before canvas element

vidya.setAttribute("src", "testing.mp4");//Place URL of the Video here (Local in this Example)
vidya.setAttribute("type","video/mp4");//What type of Video it is, Should be MP4
vidya.setAttribute("width", movieWidth);//scales the video to the width you had set above
vidya.setAttribute("controls","");//Turns on the default generic video controls
vidya.setAttribute("id","VIDEO");//gives the element an id for reference(Not Used yet)
if (autoplayVideo == true){ vidya.setAttribute("autoplay","");};

createjs.Ticker.addEventListener("tick", handleTick);

function handleTick(event){
    ctx.drawImage(vidya, 30, 70, movieWidth, movieHeight);
    console.log(ctx + " "+v);//here is where the uncaught reference is the "v"
}
0

There are 0 answers