1

www.graysonearle.com/bluemen/index2.html でこの楽しい Web プロジェクトを作成していて、さまざまな問題に直面しています。SO の誰かが、再生する前にビデオがロードされていることを確認するのを手伝ってくれましたが、この解決策は Chrome でしか機能しません。コードは次のとおりです。

    for (var i=0;i<16;i++) {
        document.write('<div class="vidBox" id="box'+i+'">');
        document.write('    <video class="vid" loop="loop" preload="metadata" id="vid'+i+'">');
        document.write('    <\/video>');
        document.write('<\/div>');
    }


var xhr = new XMLHttpRequest();
xhr.open('GET', 'videos/fullvid' + ext, 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<16;i++) {
        display(i,vid)
   }
  }
};
xhr.send();

       function display(i,vid){

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

}

編集：明確にするために、必ずしも自動再生せずに、この4x4グリッドのビデオをロードする必要があります（後でロード画面を追加する可能性があります）。ロードしたら、[PLAY ALL] をクリックすると、すべてが一度に再生されます。FISH をクリックすると、ムービー グリッドにパターンが作成されます。

4

3 に答える 3

0

Doctype を確認できますか。html5 の doctype は、以前のバージョンの html とは異なることに注意してください。Doctype を確認してください。のみである必要があります<!DOCTYPE HTML>。

編集 html5 ビデオの適切なタグ。構文を変更する必要があるかもしれないと思います。

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

また、ビデオ コーデックにも注意してください。

MP4 = H264 ビデオ コーデックおよび AAC オーディオ コーデックを使用した MPEG 4 ファイル

WebM = VP8 ビデオ コーデックと Vorbis オーディオ コーデックを使用した WebM ファイル

Ogg = Theora ビデオ コーデックと Vorbis オーディオ コーデックを使用した Ogg ファイル

一部のブラウザでビデオを再生するには、次のものが必要になる場合があります。

videoTag.src = "vid";
videoTag.load();
videoTag.play();
于 2013-02-25T23:24:45.703 に答える
0

ビデオを HTML に追加する「興味深い」方法は別として、 HTML5 メディア イベントに依存する必要があります。

まず、動画を実際に自動的にロードする場合はpreload="metadata"、 を使用しないでください。動画のメタデータのみがロードされるためです。プリロードを に設定する"auto"と役立つはずです。autoあるいは、がデフォルト値であるため、完全に省略することもできます。(ただし、Opera がこの属性のサポートを追加するたびに、デフォルトを に設定する"metadata"可能性があるため、明示的に に設定する方がよい場合があります"auto"。)

その後、XHR の混乱全体を取り除きます。次に、次のようなことができます。

var videos = document.getElementsByTagName('video');

for(var i = 0, ii = videos.length; i < ii; i++) {
  videos[i].addEventListener('canplaythrough',enablePlayback,false);
}

var videosLoaded = 0;

function enablePlayback(e) {
  videosLoaded++;
  if(videosLoaded === 16) {
    // enable a play button or do whatever you want
    // in this case: start playing all the videos at once
    for(var i = 0, ii = videos.length; i < ii; i++) {
      videos[i].play();
    }
  }
}

このコードは基本的canplaythroughにすべてのビデオにイベントのリスナーを追加し、各ビデオがそれを起動するたびにvideosLoaded変数を 1 ずつ増やし、最後のビデオがそれを呼び出してvideosLoadedヒット数が 16 になると (4x4 グリッド内のビデオの数) )、play()すべてのビデオ オブジェクトでを呼び出します。

これを正しく行うには、おそらくかなりの実験を行う必要があります (これを適切にテストするために、16 個の小さくて短いビデオを手元に用意することはできません) が、これで正しい方向に進むはずです。video.load()がすべてのビデオをダウンロードしていないかどうかも調べる必要があるかもしれませんpreload="auto"(非常に多くのビデオがあるため発生する可能性があります)。

どちらもうまくいかない場合は、video.load()すべてpreload="auto"の動画を自動再生するように設定し、イベントをリッスンしてすぐに一時停止します (その後、イベント リスナーplayを削除します)。playその後、canplaythrough以前と同じコードを用意します。

于 2013-02-26T01:07:32.667 に答える
0

document.write を使用してこれらを追加する理由はわかりませんが、とにかく autoplay プロパティをビデオに追加してみてください...

<video controls="controls" autoplay="autoplay">
  Your browser does not support the video tag.
</video>
于 2013-02-25T23:24:10.230 に答える