web-dev-qa-db-ja.com

IE9でビデオタグのソースを変更するためのsetAttributeおよびvideo.srcが機能しない

私は文字通り、IE9のJavaScriptを介してビデオタグソースを動的に変更することに関するすべてのStackoverflowスレッドを読みました。これには、有用だが同意されていない投稿 here および here が含まれますが、そこにいるような気がします別のソリューションです。これが私がやろうとしていることの非常に基本的な例です：

    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");

IEは実際には何もしていませんが、srcが単純なvideo.getAttributeでチェックされた後、間違いなく変更されているため、これらのコード行は両方ともInternet Explorerによって完全に嫌われていますビデオを切り替えます。

はい、IEでは、ページが読み込まれた後にsrcをHTMLにリストして変更する必要があるという主張がありますが、単純なJavaScriptによる解決策を提案するstackoverflowのスレッドを確実に見つけました。 （失望したことに、そうしたスレッドをもう見つけることができません....そして私はどこでも検索してきました、私を信じてください）。

以上のことから、HTML内にすべてのビデオsrcを配置せず、代わりに上記のようにJavaScriptを使用して動的にsrcを設定/作成することなく、誰かがソリューションを提供できれば、私は非常に感謝します。

（または、IEに属性が存在するかどうかをテストする「欠落している」オーバーフロースレッドの方向を示し、JavaScriptを介してsrcを設定することもできれば、それも評価されます）。

javascriptinternet-explorerhtml5-videosetattribute
11
mkralla11

素晴らしいニュースです。説明しようとした迷惑なハックを使用せずに、JavaScriptを介してHTML5ビデオタグのビデオを切り替え/変更するための真の解決策を見つけました！信じられないほどシンプルで、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でテストされ、動作しています...問題が発生した場合は、お知らせください。

28
mkralla11