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

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

Я попытался выполнить поиск в stackru и нашел довольно много одинаковых вопросов и попробовал почти каждый ответ, но кажется, что 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"));    
    }
Источник

6 ответов

Решение

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

Источник

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

вместо этого не помещайте исходные элементы в ваш html, а вместо этого добавляйте их через JS. IE9 не позволяет этого, что опять же вы можете перехватить, а затем отредактировать атрибут src самого элемента video, как я показал здесь: тег 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

Источник

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

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

Источник

К вашему сведению: вы можете сделать эту работу, не используя <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>

Источник

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

Источник

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

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

Источник
Другие вопросы по тегам