-1

http://graysonearle.com/bluemen/ Webkit ブラウザでそれをクリックします。読み込み時には 4x4 グリッドの動画が表示されるはずですが、Chrome では 1 ～ 3 本の動画しか読み込まれない傾向があります。Safari では問題なく動作します。それらは同じビデオです。小さいビデオでそれを行ったときはうまくいきましたが、これが何か関係があるのではないかと思います. ページ上のいくつかのビデオを強制的にロードする方法はありますか?

4

1 に答える 1

1

各動画の末尾にキャッシュバスターを付けると、問題なく動作するようです。Chrome では正しいことを行い、最初のフレームをポスターとしてかなり速くロードしますが、Safari ではポスターを明示的に選択する必要があります。

<!DOCTYPE html> 
<html> 
<head>
    <link rel="stylesheet" type="text/css" href="http://graysonearle.com/bluemen/css/reset.css">
    <link rel="stylesheet" type="text/css" href="http://graysonearle.com/bluemen/css/style.css">
</head>
<body> 
<script>
    for (var i=0;i<10;i++) {
        document.write('<div class="vidBox" id="box'+i+'">');
        document.write('    <video class="vid" preload="metadata" controls="true" id="vid'+i+'">');
        document.write('        <source src="http://graysonearle.com/bluemen/videos/fullvid.mp4?a='+i+'" type="video/mp4">');
        document.write('        <source src="http://graysonearle.com/bluemen/videos/red.webm" type="video/ogg">');
        document.write('    </video>');
        document.write('</div>');
    }
</script>
</body> 
</html>

それがうまくいかない場合 (ブラウザのバッファが詰まることがあるようです) は、ビデオ ソースを 1 つずつロードし、canplaythrough イベントでロードをトリガーする必要があります。

全体として、それほど堅牢ではないようです。頑張ってください

編集

わかりました、このバージョンはより堅牢ですが、少し片付ける必要があります....非同期ajax呼び出しを介してビデオをblobとして一度取得し、それをソースとして各ビデオ要素に渡します...おそらく、ビデオにポスターをロードし、ビデオがロードされるまで何らかの進行状況バーを表示したいでしょう。私はあなたのドメインへのクロスドメイン権限を持っていないので、あなたのサイズのビデオで簡単にテストできなかったので、テスト ビデオに対してこのサンプルを実行する必要がありました...しかし、試してみてください

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://graysonearle.com/bluemen/css/reset.css">
<link rel="stylesheet" type="text/css" href="http://graysonearle.com/bluemen/css/style.css">
<title></title>
</head>
<body>
<script type="text/javascript">
    for (var i=0;i<10;i++) {
        document.write('<div class="vidBox" id="box'+i+'">');
        document.write('    <video class="vid" preload="metadata" controls="true" id="vid'+i+'">');
        document.write('    <\/video>');
        document.write('<\/div>');
    }


var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://jcath-drg.s3.amazonaws.com/BigBuck.m4v', true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
  if (this.status == 200) {
    console.log("got it");
    var myBlob = this.response;
    var vid = (window.webkitURL ? webkitURL : URL).createObjectURL(myBlob);
    // myBlob is now the blob that the object URL pointed to.
       for (var i=0;i<10;i++) {
        display(i,vid)
   }
  }
};
xhr.send();

       function display(i,vid){

    var video = document.getElementById("vid"+i);
    console.log(video);
    video.src = vid;

}
</script>
</body>
</html>
于 2013-01-15T23:53:19.460 に答える