javascript - HTML 5 ビデオ スイッチャーが Safari または IE 9 で再生されない

Question

Firefox と Chrome でうまく動作する、非常に単純な HTML 5 ビデオ スイッチャーを作成しました。必要に応じて src 値が変更されていることがわかりますが、load()and/orplay()イベントのトリガーに問題があるようです。MIME タイプを確実にするための編集まで行って.htaccess、ビデオへのパスを直接の http リンクに変更しました。問題はロード/プレイ機能がどれほど単純であるかにあると確信していますが、これをトラブルシューティングしたり、信頼できるドキュメントをオンラインで見つけたりするのに苦労しています.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
var videos = new Array();

videos[0] = [
         "poster1.png",
         "video1.mp4",
         "video1.ogv"
         ];
videos[1] = [
         "poster2.png",
         "video2.mp4",
         "video2.ogv"
         ];
videos[2] = [
         "poster3.png",
         "video3.mp4",
         "video3.ogv"
         ];
videos[3] = [
         "poster4.png",
         "video4.mp4",
         "video4.ogv"
         ];

function switchVideo(n) {
    if (n >= videos.length) n = 0;

    var video = $("#video");
    var mp4 = $("#mp4");
    var ogv = $("#ogv");

    video.attr("poster", videos[n][0]);
    mp4.attr("src", videos[n][1]);
    ogv.attr("src", videos[n][2]);
    
    loadVid();
}

function loadVid() {
    document.getElementById("video").load();
    document.getElementById("video").play();
}
</script>

<div>
<video id="video" poster="poster1.png" height="445px" width="900px" preload>

  <source id="mp4" src="video1.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  <source id="ogv"  src="video1.ogv" type='video/ogg; codecs="theora, vorbis"'>
  
  <p>Your user agent does not support the HTML5 Video element.</p>

</video><br>

  <button onClick="switchVideo(0);">Video 1</button>
  <button onClick="switchVideo(1);">Video 2</button>
  <button onClick="switchVideo(2);">Video 3</button>
  <button onClick="switchVideo(3);">Video 4</button>
  
</div>