setAttribute и video.src для изменения источника тега видео не работают в IE9

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

    var video = document.getElementById('video');
    //now, use either of the lines of code below to change source dynamically

    video.src = "nameOfVideo";
    //or use...
    video.setAttribute("src", "nameOfVideo");

Обе эти строки кода категорически не нравятся Internet Explorer, особенно потому, что src определенно изменяется после проверки с помощью простого атрибута video.getAttribute, хотя IE на самом деле ничего не делает для переключения видео.

Да, есть утверждения, что с IE вы ДОЛЖНЫ иметь src в списке HTML, чтобы изменить их после загрузки страницы, НО я определенно нашел поток в stackoverflow, который предложил решение с помощью простого JavaScript. (К моему разочарованию, я больше не могу найти нить, которая это сделала.... и я искал везде, поверьте мне).

С учетом всего сказанного, если кто-нибудь может предоставить решение БЕЗ использования размещения всех видео src в HTML и вместо этого динамической настройки/создания src с использованием JavaScript, как показано выше, я был бы чрезвычайно благодарен.

(Или, если бы вы могли указать мне направление «отсутствующего» потока переполнения, который проверяет, существует ли атрибут в IE, а затем каким-то образом устанавливает src через javascript, это также будет оценено).


person mkralla11    schedule 28.08.2012    source источник


Ответы (1)


Отличные новости, я нашел верное решение для переключения/изменения видео в видеотегах HTML5 с помощью JavaScript без использования надоедливого хака, который я пытался объяснить! Это невероятно просто, и потребовалось МНОГО экспериментов с IE. Ниже приведен код в его простейшей форме для работы в IE:

<html>
  <body>
    <video id='videoPlayer' width="320" height="240" controls="controls">
       <source id='mp4Source' src="movie.mp4" type="video/mp4" />
       <source id='oggSource' src="movie.ogg" type="video/ogg" />
    </video>

<!-- You MUST give your sources tags individual ID's for the solution to work. -->

    <script>
      var player = document.getElementById('videoPlayer');

      var mp4Vid = document.getElementById('mp4Source');

      player.pause();

      // Now simply set the 'src' property of the mp4Vid variable!!!!

      mp4Vid.src = "/pathTo/newVideo.mp4";

      player.load();
      player.play();
    </script>
  </body>
</html>

И вот оно. Невероятно просто -- проверено и работает в IE8 и IE9... Если у вас возникнут какие-либо проблемы, дайте мне знать.

person mkralla11    schedule 16.09.2012
comment
Я нахожусь на другом пути с html5 vid. Совместимость с браузером здесь жесткая. Время шло к тому, чтобы заставить IE9 делать то, что могли ff и chrome. Ваш пост зацепил. Отлично спасибо. Кстати, хороший сайт :) - person Randy Skretka; 28.04.2013
comment
Я разбил его. Взял несколько беспокойных минут, но нашел .. ЗАКАЗ ИЛИ «источник» ЭЛЕМЕНТЫ! .. является критическим. .mp4 должен стоять перед типом .ogg. Я переключился, чтобы ff не говорил о неподдерживаемом типе в консоли. Но фф работает в любом случае а остальные нет! - person Randy Skretka; 28.04.2013
comment
IE8? Как это возможно? IE8 не поддерживает тег видео. - person franzlorenzon; 08.07.2013
comment
Это не работает в IE8. Кроме того, то, что Рэнди обнаружил с файлами .mp4 и .ogg, означает, что они почти не работают в IE9. Это действительно гениальное решение. - person Lloyd Banks; 20.08.2015
comment
просто к вашему сведению, этому ответу 3 года, и вы правы, он не работает в ie8. У меня был другой JS, к которому в то время возвращались теги видео, и я должен был опубликовать его. Кроме того, нет такого понятия, как «едва работает», оно либо работает, либо нет. если у вас есть обновления для этого ответа для лучшей кросс-браузерной поддержки на сегодняшний день, пожалуйста, отредактируйте его, и я приму ваши обновления. - person mkralla11; 20.08.2015
comment
на айпаде тоже работало, но как перейти в полноэкранный режим? - person user1788736; 26.02.2016
comment
Великолепно! Вот как это сделать. Вам даже не нужен jQuery; просто замените: mp4Vid.setAttribute('src', /pathTo/newVideo.mp4); - person Velojet; 16.03.2016
comment
У меня это не сработало, но я нашел другой... попробуйте другой сервер! Была та же проблема, что и у OP, только с IE11. Ошибка Invalid Source возникала даже при простом выполнении video.load() без изменения video.src. Моя проблема оказалась также связана с сервером (IIS 7.5). Скопировал тот же код на более новый сервер (Windows Server 2012 R2 с IIS 8.5), и проблемы исчезли! - person BA TabNabber; 29.07.2016