My video player application utilizes a modified version of video For everybody. The setup involves an HTML5 <video> tag encompassing an <object> tag for flash fallback on Internet Explorer. Everything functions smoothly when I employ this setup statically, but once I attempt to create the video elements using JavaScript, IE9 seems to encounter some issues.
The static code that works fine looks like this:
<video id="video" width="360" height="240>
<source type="video/ogg" src="content/mov1.ogv"></source>
<source type="video/mp4" src="content/mov1.mp4"></source>
<object data="player.swf" type="application/x-shockwave-flash" height="384" width="512">
<param name="movie" value="player.swf" >
<param value="autostart=true&file=/mov1.mp4" name="flashvars">
</object>
</video>
However, if I use a JavaScript function to build the video player as demonstrated here, it doesn't work:
function makeV4EPlayer(mp4URL, ogvURL, movieWidth, movieHeight, displayname){
//create the video element and set its attributes
var videoObject= document.createElement('video');
videoObject.setAttribute("id", "video");
videoObject.setAttribute("width", movieWidth);
videoObject.setAttribute("height", movieHeight);
//add mp4 source
var mp4Src=document.createElement('source');
mp4Src.setAttribute("src", mp4URL);
mp4Src.setAttribute("type","video/mp4");
videoObject.appendChild(mp4Src);
//add ogv source
var oggSrc=document.createElement('source');
oggSrc.setAttribute("src", ogvURL);
oggSrc.setAttribute("type","video/ogg");
videoObject.appendChild(oggSrc);
//add object with flash player
var flashObject=document.createElement('object');
flashObject.setAttribute("width", movieWidth);
flashObject.setAttribute("height", movieHeight);
flashObject.setAttribute("type", "application/x-shockwave-flash");
flashObject.setAttribute("data","swf/player.swf");
var params1 = document.createElement('param');
params1.setAttribute("name", "movie");
params1.setAttribute("value","swf/player.swf");
var params2=document.createElement('param');
params2.setAttribute("name","flashvars");
params2.setAttribute("value",'autostart=true' + '&file=/' + mp4URL);
flashObject.appendChild(params1);
flashObject.appendChild(params2);
videoObject.appendChild(flashObject);
return videoObject;
}
The JavaScript successfully constructs the <video> tag and populates it, but it appears that IE won't play it. Nevertheless, it operates flawlessly on all other browsers.
Upon inspecting the pages using IE9 developer tools, I observed that in the static version, the video tag and object tag are considered siblings - meaning the object isn't nested within the video tag. However, in the dynamic JavaScript version, the object is contained inside the video tag. This seems to be the root of the issue.
It's worth mentioning that I am utilizing the JW Player as my fallback flash player, although I don't believe this is related to the problem at hand.