2012-01-03 14 views
3

ソースタグのsrc属性を変更するボタンをクリックし、プレーヤー要素に負荷を呼び出すことで動作する、自分のサイトの1ページ分のシンプルなビデオプレーヤーを作成しました。 video要素は次のようになります。Odd Safariビデオ "Load"の動作

<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> 

し、Clickイベントへの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(); 

     }  
    }); 

これは、クロムと、おそらくFirefoxの上で完全に正常に動作しますが、奇妙な問題は、ときに来ます私はサファリでこれを使う。最初のビデオが表示されますが、再生しようとするすべての2番目のビデオはロードしようとしません。コンソールからプレーヤーに「ロード」を呼び出すと結果は得られませんが、プレーヤーの点検でソースが正しいことが示され、動作していないビデオの後でクリックすると動画が再生されます。

私はあまりにも混乱しないように思っています。基本的には、サファリは再生しようとする他のすべてのビデオをロードしませんが、自分でファイルを再生するのは問題ありません。私はそれが働くために呼び出さなければならないいくつかの余分な機能があるという気持ちがありますが、わかりません。

更新:クリックしたボタンに関係なく実行するclickイベントを書き換えました。ビデオ自体ではなく、クリックごとに動画を読み込む際の問題です。

更新2:ビデオhtmlをクリアし、新しいhtmlを挿入する前にロードして初期化し、〜2/3sの時間の読み込みを開始させるいくつかの行を追加しようとしました。

+0

オブジェクトを閉じるのを忘れました – noob

+0

ソースを反映するように修正されたコピー/貼り付けエラー(まだ動作していません)。 – JProffitt

答えて

2

ブロック内で<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で問題に役立つかもしれません。

+0

私が実装した解決策は、タグを取り除き、 "canPlayType(type)"を使って適切な形式でsrcとして直接ロードすることでした。 タグはまだ完全にサポートされていないようです。 – JProffitt

+0

あなたの答えは決して受け入れられませんでした。 – JProffitt

+0

あなた自身の答えも追加することができます;)あなたの答えはSafariの方が正確です。 – Inferpse

関連する問題