Question

I just copied some sample from book HTML5 Canvas, which loads video in the javascript and show that video on Canvas;

the Basic code is as following:

videoElement = document.createElement("video");
videoDiv = document.createElement("div");
document.body.appendChild(videoDiv);
videoDiv.appendChild(videoElement);

videoElement.setAttribute("src", "url to the video");
videoElement.addEventListener("canplaythrough", videoLoaded, false);

suppose the videoLoaded should be called after when loading video, but it isn’t;

I checked it in firebug, it shows that the browser just keeps loading the video, but no content fetched;

I just upgrade firefox from v17 to v18.

And it worked in V17.

Could some help me out of this? thanks.

Answer 1

Try setting the source without the “setAttribute” function. You will also need to enable the controls in order for most browsers to actual run.

Replace:

videoElement.setAttribute("src", "url to the video");

with:

videoElement.src = 'http://static.bouncingminds.com/ads/5secs/baileys_5sec.mp4';
videoElement.width = 320;
videoElement.height = 240;
videoElement.controls = true;

There are other options you can apply to the video tag, one of which I’d suggest considering is “preload”

All works on Chrome with the above code… I also suggest not relying on HTML5 as all browsers do not support. There are a few good fallback options such as VideoJS and JWPlayer which will play what browsers support rather than forcing HTML5 or Flash

edit: I just noticed “FireFox” — replace the .mp4 video with something else, FF doesn’t play well with mp4’s