video.js - Safari および IE での Video.js の問題

Question

私は video.js を使用しており、特定のサムネイルをクリックしたときに変更する必要がある 1 つのビデオ領域を含むページがあります。このために、次のコードを使用します。

<video id="div_video" class="video-js vjs-default-skin" controls preload="none" width="560" height="315" poster="<?=ROOT?>media/videos/testvid_01.jpg" data-setup="{}">
    <source id="video_mp4" src="<?=ROOT?>media/videos/testvid_01.mp4" type="video/mp4" />
    <source id="video_ogg" src="<?=ROOT?>media/videos/testvid_01.ogv" type="video/ogg" />
    <source id="video_webm" src="<?=ROOT?>media/videos/testvid_01.webm" type="video/webm" />
</video>

サムネイルは、「サムネイル」クラスの通常のリンクです。ビデオを変更するには、次のコードを使用します。

$(function () {
  $('.thumbnail').click(function () {
    var $target = 'testvid_' + $(this).attr('id');
    var $content_path = '<?=ROOT?>media/videos/';
    var $vid_obj = _V_('div_video');

    $('img.vjs-poster').hide();

    $vid_obj.ready(function () {
      $vid_obj.pause();
      $('video:nth-child(1)').attr('src', $content_path + $target + '.mp4');
      $('video:nth-child(1)').attr('src', $content_path + $target + '.ogv');
      $('video:nth-child(1)').attr('src', $content_path + $target + '.webm');
      $('img.vjs-poster')
        .attr('src', $content_path + $target + '.jpg')
        .show();
      $('.vjs-big-play-button').show();
      $('#div_video').removeClass('vjs-playing').addClass('vjs-paused');
      $vid_obj.load();
      $vid_obj.play();
    });
  });

  $('#01').click();
});

ROOT は完全なドメイン名です。

現在、これは Firefox と Chrome で完全に機能します。ビデオが自動的に再生を開始し、サムネイルの 1 つをクリックすると、別のビデオに変わります。完全！

ただし、Safari (5.1.7) および IE (9) では機能しません。Safari では読み込みアイコンが無限に表示され続け、IE ではまったく起動しません。

\$("#01").click(); を削除すると、最初のビデオ (デフォルトでそこにあります) は機能しますが、サムネイルをクリックすると、読み込みアイコンが再び表示され続けます。

IEでは、まったく再生されません。互換モードを使用すると、再生は開始されますが、サウンドのみが再生されます。

ここで何が問題なのか知っている人はいますか？ありがとう！