视频标签在IE 9中不起作用

时间:2011-10-24 15:52:59

标签: jquery html5 video internet-explorer-9

我正在制作的视频标签在IE9中不起作用。它在Firefox和Chrome中运行良好。

我将mime添加到IIS 7.5服务器Extension = .mp4 Mime Type = video / mp4

我使用此代码使用jQuery创建元素

function fsuccLoadVideo(data) {
    var arr = GetNormalizeMetadataClean(data);
    var vid = $('<video width=400 height=300 controls poster=' + arr[0]["CntrTestVideoImage"] + '/>');
    var loc = window.location.href;
    var idx = loc.lastIndexOf('/') + 1;
    var mp4loc = loc.substr(0, idx)+ arr[0]["CntrTestVideoMp4Src"];
    loc =  loc.substr(0, idx)+ arr[0]["CntrTestVideoOggSrc"];
    if ((arr[0]["CntrTestVideoMp4Src"] != undefined) && (arr[0]["CntrTestVideoMp4Src"].length > 0)) {
        $("<source />", { src: loc, type: 'video/webm; codecs="vp8, vorbis"' }).appendTo(vid);
        $("<source />", { src: mp4loc, type: 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"' }).appendTo(vid);
        $("<source />", { src: loc, type: 'video/ogg; codecs="theora, vorbis"' }).appendTo(vid);

        $(vid).append("Your browser does not support the video tag");
        $("#videosection").append(vid);
    }

}

并以这种方式在浏览器上呈现:

<source 
  src="http://10.1.16.102:90/Intranet/safety/contractortest/video/cntrTest1.ogg" 
  type="video/webm; codecs="vp8, vorbis"">

(无法使格式化正确以显示完整渲染,但这是关键线

3 个答案:

答案 0 :(得分:6)

问题似乎是 IE9不允许动态添加源标记。出于某种原因,$('video')。append(...)将不适用于此元素。

你必须做这样的事情:

$('video').append('<source src="' + pathMp4 + '" type="video/mp4"><source src="' + pathWebm + '" type="video/webm">');
if(!$('video').children('source').length) { // set src&type attribute for ie9/android3.1 because it does not add the source child-elements
    $('video').attr('src', pathMp4 ).attr('type','video/mp4');
}

在iOS 4,Android 3.1&amp; 3.2和当前版本的FF,Chrome,IE9,Opera和Safari(Win)

2012年8月更新~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

很久以前就写了这个评论,并且仍然为它起了回报 - 从那以后我改变了主意:如果你开始使用javascript,只需使用原生$('video')[0].canPlayType("video/mp4")(或“视频/ webm” “;或者没有jQuery)来检查哪个源适合并使用$('video')[0].src(<URL>)函数进行设置。唯一的缺点是你需要一个Android 2.1&amp;的polyfill。 2.2 canPlayType()未附带的内容:

var ua = window.navigator.userAgent.toLowerCase();
if(ua.match(/android 2\.[12]/) !== null)
    HTMLMediaElement.prototype.canPlayType = function(type) {
        return (type.match(/video\/(mp4|m4v)/gi) !== null) ? 'maybe' : '';
    }
}

因此,如果使用JavaScript,我建议不要使用<source>子节点。

答案 1 :(得分:0)

ie9仅支持webm,如果您将其安装为第三方应用程序。

答案 2 :(得分:0)

我建议不要将编解码器添加到源type属性,最好让浏览器自行决定,除非您100%确定使用了哪些编解码器对视频文件进行编码。