Видео тег не работает в IE 9 - PullRequest
Новая
       20

Видео тег не работает в IE 9

1 голос
/ 24 октября 2011

Метка видео, которую я создаю, не будет работать в IE9. Работает нормально в Firefox и Chrome.

Я добавил MIME для расширения сервера IIS 7.5 = .mp4 Тип MIME = видео / 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 ]

6 голосов
/ 26 октября 2011

Кажется, проблема в том, что 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 и 3.2 и текущие версии FF, Chrome, IE9, Opera и Safari (Win)

.

ОБНОВЛЕНИЕ Авг 2012 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

написал этот комментарий давно и до сих пор получает за него отрицательные отзывы - с тех пор я передумал: еслидля начала вы используете javascript, просто используйте нативный $('video')[0].canPlayType("video/mp4") (или «video / webm» или без jQuery), чтобы проверить, какой источник подходит, и установить его с помощью функции $('video')[0].src(<URL>).Единственным недостатком является то, что вам нужен полифилл для Android 2.1 и 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' : '';
    }
}

Таким образом, я бы рекомендовал не использовать <source> дочерних узлов, если используется JavaScriptв любом случае.

0 голосов
/ 26 октября 2011

Я бы порекомендовал не добавлять кодеки в атрибут источника type, лучше позволить браузеру самому решать, если вы не уверены на 100%, какой кодек использовался для кодирования видеофайлов.

0 голосов
/ 24 октября 2011

ie9 поддерживает только webm, если вы устанавливаете его как стороннее приложение.

...