Нечетное сафари Видео «Загрузка» Поведение

Question

Я написал простой видеопроигрыватель для одной страницы моего сайта, который работает, нажимая кнопки, чтобы изменить атрибут src исходных тегов, а затем вызвать нагрузку на элемент игрока. Видео элемент выглядит следующим образом:

<video id="player" title="Video 1" controls width="600" height="480" preload="metadata"> 
     <source src="videos/english.mp4" type="video/mp4" /> 
     <source src="videos/english.webm" type="video/webm" /> 
     <source src="videos/english.ogv" type="video/ogg" /> 
     <object type="application/x-shockwave-flash" data="plugins/flash/player.swf" 
    width="600" height="480"> 
     <param name="movie" value="plugins/flash/player.swf" /> 
     <param name="allowfullscreen" value="true" /> 
     <param name="allowscriptaccess" value="always" /> 
     <param name="flashvars" value="file=../../videos/english.mp4" /> 
     <p>Your browser can't play HTML5 video. <a href="videos/english.webm"> 
    Download it</a> instead.</p> 
     </object> 
    </video> 

И сценарий relavent на событие щелчка выглядит следующим образом:

$(".playerControl").live("click tap",function(){ 

     // If the player isn't playing this divs video 

     if($("#player").data('currentVideo') != $(this).data('videoID')){ 

      // Swap active button states 

      $(".playerControl.active").removeClass('active'); 
      $(this).addClass('active'); 

      // Pause the current video and swap the content, then load the player 

      $("#player")[0].pause(); 
      $("#player").html($(this).data('innerHTML')); 
      $("#player").data({ 
       innerHTML: $(this).data('innerHTML'), 
       currentVideo: $(this).data('videoID') 
      }); 
      $("#player")[0].load(); 
      updateBackup(); 

     }  
    }); 

Это отлично работает на хроме и предположительно светлячок, но странный вопрос приходит, когда Я использую это на сафари. Первое видео появится, но каждое второе видео, которое я пытаюсь воспроизвести, даже не пытается загрузить. Вызов «загрузки» на проигрыватель с консоли также не дает результатов, но проверка игрока показывает, что его источники верны, и видео будет воспроизводиться, если мне удастся щелкнуть его после видео, которое не работает.

Я надеюсь, что это не звучит слишком запутанно, в основном сафари не загружает все другие видео, которые я пытаюсь воспроизвести, но не имеет проблем с воспроизведением каких-либо файлов самостоятельно. У меня есть чувство, что есть дополнительная функция, которую я должен вызвать, чтобы заставить ее работать, но я не уверен.

Обновление: я переписал событие click для выполнения, независимо от того, какая кнопка нажата, и это проблема с загрузкой видео с любого другого клика, а не с самого видео.

Обновление 2: Я попытался добавить пару строк, которые очистили видео html и загрузили перед вставкой нового html, чтобы инициализировать его, и это заставило его начать загрузку ~ 2/3rds того времени.

Answer 1

Вы можете попробовать обернуть тэг <video> в блок и переписать его innerHTML.

Что-то вроде этого:

<div id="player-holder"> 
    <video id="player">...</video> 
</div> 

// rebuild player data and reload HTML. 
$("#player").html($(this).data('innerHTML')); 
$('#player-holder').html($('#player-holder').html()) 

Это восстановит <video> элемент и может помочь с проблемой в Safari.