Question

我有一个使用video For everybody变体的视频播放器应用程序。使用HTML5 <video>标记，在互联网浏览器上为flash falback附加<object>标记。当我静态地执行此操作时，这一切都运行良好，但是当使用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播放器作为我的后备闪存播放器。

Answer 1

IE 不支持 ogg 格式（另请参阅browser compatibility page），其他brwoser不支持。

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

=== UPDATE ===

在以下行中，您使用的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，所以我不能为您做到这一点）。

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

使用object标记的视频回退不适用于appendChild

1 个答案: