使用对象标签的视频后备不适用于 appendChild

Question

我有一个使用video For everybody 变体的视频播放器应用程序。使用 HTML5 <video> 标记包含 <object> 标记，用于 Internet 爆炸器上的 Flash 回退。当我静态执行此操作时一切正常，但是当使用 javascript 构建视频元素时，似乎 IE9 不喜欢这样。

如果我使用这样的静态代码，它可以工作：

<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>

但是当我使用 javascript 函数来构建如下视频播放器时，它没有。

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;
}

Javascript 很好地构建了<video> 标签，并用所有的东西填充它，只是 IE 不会播放它。当然，它可以在宇宙中的所有其他浏览器上正常运行。

当我使用 IE9 开发人员工具检查页面时，我注意到在静态版本中，它会将视频标签和对象标签视为同级 - 即对象不在视频标签内，而是在 javascript版本对象嵌套在视频标签内。我认为这是问题的关键。

我认为这无关紧要，但我正在使用 JW Player 作为我的备用 Flash 播放器。

Answer 1

IE 不支持 ogg 格式（另见browser compatibility page），其他浏览器支持。

可能是 MP4 网址不正确或文件损坏？

=== 更新 ===

在以下行中，您使用的是之前未定义的 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;
}

您也可以使用this jsfiddle 进行测试（我没有 IE9，所以无法为您做）。

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