html - 読み込み後に HTML5 ビデオを自動再生する

Question

読み込み後にのみ HTML5 ビデオを自動再生したい。また、読み込み中に進行状況バー (GIF または CSS) を表示したいと考えています。何か助けはありますか？

Answer 1

video.js も使用した、よりクリーンな例があります。

function progress(){
  video = this;
  if (video.bufferedPercent() > .95 && video.paused()) {
    video.play();
  }
}

$(document).ready(function() {
   _V_("video").ready(function(){
      this.on("progress", progress);
  });
});

と

<video src="mcd.mp4" id="video">

Answer 2

UPDATE 2ねえ、この答えはこのシナリオの特定の回避策です（スムーズに再生したい低速接続の12秒のビデオのみ）にもかかわらず、これはあなたのニーズを満たすはずです：

 $(document).ready(function() {
   _V_("example_video_1").ready(function(){
      var myPlayer = this;
      myPlayer.on("progress", out_started);
  });
});

function out_started(){
  myPlayer =this;
  var myTextArea = document.getElementById('buffered');
  bufferedTimeRange=myPlayer.buffered();
  if ( (bufferedTimeRange.start(0)==0 ) && ( bufferedTimeRange.end(0) -  bufferedTimeRange.start(0) > 10 ) ){
       myPlayer.play();
  }

}

したがって、いくつかのことは、bufferedTimeRange複数の時間になる可能性があります（ただし、ドキュメントが通常1つだけと言うように、ビデオオッズはわずか12秒で1つだけです）..しかし、保証されていません. それでもなお、これをデモするリンクがありますhttp://ec2-23-20-36-210.compute-1.amazonaws.com/video-js.htmlこれが役立つことを願っています! また、10 秒のバッファリングされたビデオでは不十分な場合は、if ステートメントで10を aに変更できます。12

元の回答 なぜこれをやりたいのかわかりません...しかし、video.jsはそれを可能にします

というビデオ要素がある場合は、example_video_1次のような javascript を記述できます (これは、video.js を使用することを選択した場合ではありません。これも簡単にセットアップすることをお勧めします。例については、http: //www.videojs.com/ を参照してください)。実際に設定を開始します）

VideoJS("example_video_1").ready(function(){

    var myPlayer = this;

    var howMuchIsDownloaded = myPlayer.bufferedPercent();
    if(howMuchIsDownloaded == 1){
    myPlayer.play();  //start playing the video 
    }else{
    setTimeout(arguments.callee, 100);
    }
 });

上記の API 呼び出しは現在、 Video.jsで壊れているようです (バグが報告されています)。ビデオ タグ ID が"example_video_1"

$(document).ready(function() {
   _V_("example_video_1").ready(function(){
    var myPlayer = this; 
    myPlayer.on("loadedalldata", Done_download);

  });
});

function Done_download(){
   myPlayer =this;
   var myTextArea = document.getElementById('buffered');
   alert("The video has  been fully buffered ");
    myPlayer.off("loadedalldata", Done_download);
 }

Video.js には、再生が特定の範囲のビデオ (少なくとも .mp4 ソース) に達する前にビデオ ストリーム全体をバッファリングできないようにする内部メカニズムがあるように見えることに注意してください @DONSA これを確認できますここで奇妙な動作video-js サンプルページ...テストサーバーで数日間それを維持します