11

私は文字通り、IE9のjavascriptを介してビデオタグソースを動的に変更することに関するすべてのstackoverflowスレッドを読みました。これには、こことここでの有用であるが合意されていない投稿が含まれますが、別の解決策があるように感じます。これが私がやろうとしていることの非常に基本的な例です：

    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は実際にはビデオを切り替えるために何もしていませんが、特に単純なvideo.getAttributeでチェックした後、srcが最も確実に変更されているため、これらのコード行は両方ともInternetExplorerによって完全に嫌われています。

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

とはいえ、すべてのビデオsrcをHTML内に配置せずに、上記のようにJavaScriptを使用してsrcを動的に設定/作成することなく、誰かが解決策を提供できれば、非常にありがたいです。

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

4

1 に答える 1

29

すばらしいニュースです。私が説明しようとした面倒なハックを使用せずに、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 で動作しています... 何か問題がありましたら、お知らせください。

于 2012-09-16T15:11:18.843 に答える