Невозможно изменить источник видео тега через JavaScript на IE9

Question

Привет, я работаю над HTML5 Video Player, в настоящее время я испытываю странную ошибку.Я могу нормально воспроизводить видео в IE и Chrome, однако, когда я динамически хочу изменить источник видео с помощью java-скрипта, у меня возникают проблемы.Chrome меняет источник видео без каких-либо проблем, однако IE9 сохраняет прежнее видео и просто не меняется.Safari также отлично работает.

Я попытался выполнить поиск в stackoverflow, нашел довольно много одинаковых вопросов и попробовал почти каждый ответ, но кажется, что у IE свой стиль работы, или я что-то упустил.Просто чтобы убедиться, что я переключаю файлы, чтобы убедиться, что оба видео работают в IE9, и оба работают, однако они просто не воспроизводятся, когда я пытаюсь манипулировать ими через javascript.пример кода ниже

<div class="video">
     <video id="example_video_2" class="video-js" width="640" height="264" controls="controls" preload="auto" >
        <source src="song.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />             </div>                
   </div>

, в то время как JavaScript прост:

function myNewSrc() {

    var myVideo = document.getElementById('example_video_2');
  // myVideo.src = "";
   myVideo.src = "120235_VIDHIGH.mov";
    //alert(myVideo.src);
    myVideo.load();

    myVideo.play();
    //changeMovieSource('song.mp4','something');
    //$("#example_video_2 > source").attr("src", "120235_VIDHIGH.mov");
    //alert($("#example_video_2 > source").attr("src"));    
    }

Answer 1

Удалите полный HTML-элемент видео и создайте новый вместо того, чтобы просто заменить один из его атрибутов.

Answer 2

В отличие от TweeZz, я советую не удалять весь видеоэлемент, поскольку это нарушает код на iOS (и Android).

Вместо этого не помещайте исходные элементы в html, а добавляйте их через JS. IE9 не позволяет этого, что опять же вы можете перехватить, а затем отредактировать атрибут src самого элемента video, как я показал здесь: Видео тег не работает в IE 9

в качестве ярлыка, вот код, который я разместил там:

$('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');
}

Справочная информация: когда вы устанавливаете исходные элементы в своем HTML, IE9 отдает приоритет этой информации. Позже, когда вы используете функцию .src(), только атрибут src видео-элемента будет перезаписан, но из-за приоритета IE9 для исходного элемента это не будет иметь значения.

-> определенно ошибка в IE9

ОБНОВЛЕНИЕ: пожалуйста, проверьте этот пост для лучшего решения: Видео тег не работает в IE 9

Answer 3

Была та же проблема, что и у OP только с IE11. Ошибка «Неверный источник» возникнет даже при простом выполнении video.load () без изменения video.src. Моя проблема оказалась, что это также было связано с сервером (IIS 7.5).

Переключился на более новый сервер (Windows Server 2012 R2 с IIS 8.5), и проблемы исчезли!

Answer 4

Я согласен с рекомендацией Беркефельда против замены всего видеоэлемента, НО существует лучшее решение этой проблемы, чем создание видеоэлемента и добавление видео с помощью javascript в соответствии с предложением.

Iстолкнулся с точно такой же проблемой здесь и после долгих (и я имею в виду много) проб и ошибок я нашел реальное решение и разместил его на этой странице.Internet Explorer был кошмаром при работе со сменой видео с помощью тегов HTML5, но это решает проблему.

Answer 5

Не уверен, что это вызвало вашу проблему, но вам не нужен закрывающий тег </video>?Я знаю, что некоторые закрывающие теги могут быть опущены в HTML5, но я не думал, что видео было одним из них, и это, вероятно, вызвало бы проблемы с javascript.

Answer 6

К вашему сведению: вы можете сделать эту работу, не используя элементы <source> и вместо этого используя атрибут src: <video id="example_video_2" class="video-js" width="640" height="264" controls="controls" preload="auto" > <source src="song.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> </video>

Просто становится <video id="example_video_2" class="video-js" width="640" height="264" controls="controls" preload="auto" src="song.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></video>