0

I've got a video player application that uses a variant of video For everybody. With a HTML5 <video> tag enclosing a <object> tag for flash falback on internet exploder. It all works well when I do this statically, however when the video elements are built using javascript, it seems that IE9 doesn't like this.

If i use static code like this it works:

<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&amp;file=/mov1.mp4" name="flashvars">
</object>
</video>

but when I use a javascript function to build the video player as below, it doesn't.

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 builds the <video> tag just fine, and populates it with all the stuff, it's just that IE won't play it. Of course it works happily on every other browser in the universe.

When I use the IE9 developer tools to inspect the pages I note that in the static version it sees the video tag and the object tag as being siblings - that is the object isn't inside the video tag, but in the javascript version the object is nested inside the video tag. That I believe is the nub of the problem.

I don't think it's relevant, but I'm using the JW Player as my fallback flash player.

4

1 回答 1

0

IE不支持ogg格式（另见浏览器兼容性页面），其他浏览器支持。

也许 MP4 URL 不正确或文件损坏？

=== 更新 ===

在以下行中，您使用imagesrc的是之前未定义的：

params2.setAttribute("value",'autostart=true' + imagesrc + '&file=/' + mp4URL);

你应该先初始化它。

=== UDPATE ===

如果object标签不应该在video标签中，您必须进行更改，因为您只能返回一个元素。例如，将两者都放在一个包装器元素中：

function makeV4EPlayer(mp4URL, ogvURL, movieWidth, movieHeight, displayname){
    // create a wrapper
    var videoWrapper = document.createElement('div');
    videoWrapper.style.width = movieWidth+'px';
    videoWrapper.style.height = movieHeight+'px';
    videoWrapper.style.padding = '0';
    videoWrapper.style.margin = '0';

    //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 video to wrapper
    videoWrapper.appendChild(videoObject);

    //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);

    // add flash player to wrapper
    videoWrapper.appendChild(flashObject);

    return videoWrapper;
}

你也可以用这个 jsfiddle进行测试（我没有 IE9，所以我不能为你做）。

或者，您可以创建两个函数，一个用于视频标签，另一个用于对象标签。

于 2012-07-30T07:14:39.740 回答