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

Я буквально прочитал каждый поток stackru, касающийся динамического изменения источника видео-тега с помощью 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, чтобы изменить их после загрузки страницы, НО я определенно нашел поток в stackru, который предлагал решение с помощью простого JavaScript. (К моему разочарованию, я больше не могу найти нить, которая сделала это... и я искал везде, поверьте мне).

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

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

Источник

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... Если у вас возникли проблемы, пожалуйста, дайте мне знать.

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