HTML5ビデオでChromeを検索する

Question

Chromeで動画を探すときに問題が発生しています。私はconsole.log(video.currentTime)続く、video.currentTime = 5を呼び出すときに関係なく、私は何をすべきか何らかの理由で

、video.seekable.end(0)は常に0

ですが、私はそれがビデオをリセットするように思われ、常に0である参照してください。

私はMP4とVP9ベースのwebm形式の両方を試しましたが、どちらも同じ結果でした。

さらに厄介なことは、Firefoxがすべてを完全に実行していることです。私が知っておくべきChromeについて特別なことはありますか？ここで

は（唯一のFirefoxで動作します）私のコードです：単にvideoDiv.play()を呼び出すと、実際に正しく両方のブラウザでビデオを再生しない

var videoDiv = $(".myvideo").children().get(0) 
videoDiv.load(); 
    videoDiv.addEventListener("loadeddata", function(){ 
    console.log("loaded"); 
    console.log(videoDiv.seekable.end(0)); //Why is this always 0 in Chrome, but not Firefox? 
    videoDiv.currentTime = 5; 
    console.log(videoDiv.currentTime); //Why is this also always 0 in Chrome, but not Firefox? 
    }); 

注：

 <div class="myvideo"> 
     <video width="500" height="300" id="video1" preload="auto"> 
      <source src="data/video1.webm" type="video/webm"/> 
      Your browser does not support videos. 
     </video> 
     </div> 

そして、ここではjavascriptのです。

ムービーファイルが完全にロードされた後、videoDiv.buffered.end(0)も両方のブラウザで正しい値を示します。

Answer 1

...

問題は、サーバー側であることが判明しました。私はすべてのビデオファイルを提供するためにJettyのバージョンを使用していました。 Jettyの簡単な設定はbyte servingをサポートしていませんでした。

FirefoxとChromeの違いは、サーバーがhttp code 206 (partial content)をサポートしていない場合でも、Firefoxがビデオファイル全体をダウンロードして検索できることです。一方、Chromeは、ファイル全体をダウンロードすることを拒否します（実際には小さくない場合を除き、約2〜3MBのように）。

だから、Chromeで動作しているように、HTML5ビデオのcurrentTimeパラメータを取得するには、この問題を持つ誰のHTTPコード206

をサポートするサーバーを必要とする、あなたはカールを使用してサーバの設定を再確認することができます：

curl -H Range:bytes=16- -I http://localhost:8080/GOPR0001.mp4 

これはコード206を返す必要があります。それはコード200を返した場合、Chromeはビデオを追求することはできませんが、Firefoxが原因ブラウザでこの問題を回避するには、なります。

そして最後のヒント：

npm install http-server -g 

そしてローカルフォルダを提供するために、それを実行します：あなたは、部分的なコンテンツをサポートするローカルフォルダのための単純なHTTPサーバーを取得するには、NPMのhttpサーバを使用することができます

http-server -p 8000 

Answer 2

ビデオタグには、MP4、OGG、WebMの3つの可能性があります。

すべてのブラウザですべてのフォーマットが動作するわけではありません。

WebMはFirefoxでは動作しますがChromeでは動作しないと考えていますので、MP4ファイルを参照する2番目のソースタグを含めることで、MP4とWebMファイルの両方の代替フォーマットを提供する必要があります。

など。 src = "data/video1.mp4" type = "video/mp4"

該当するバージョンがブラウザによって自動的に選択されます。

Answer 3

私にも同様の問題がありました。私はビデオの終了イベントを聞いて、ビデオの途中にcurrentTimeを設定して、それを連続的にループしていました。 SafariやChromeでは動作しませんでした。

Safari/Chromeには、メディアが現在再生されていない限り、再生ヘッドの位置プロパティが利用できないバグがあると思います。

私の回避策は、ビデオが終了する直前にループを開始し、実際に終了させないことでした。

最初に再生を開始してテストしてから、機能を実行してSafari Chromeで動作するかどうかを確認してください。

Answer 4

loadeddataの代わりにcanplaythroughを待つと動作します。

this codepen exampleを参照してください。

それはそれを把握するために私にしばらく時間がかかった