1. ホーム
  2. google-chrome

HTML5動画がループしない

2023-09-30 03:50:08

質問

ウェブページの背景として動画があるのですが、それをループさせようとしています。以下はそのコードです。

<video autoplay='true' loop='true' muted='true'>
  <source src='/admin/wallpapers/linked/4ebc66e899727777b400003c' type='video/mp4'></source>
</video>

動画をループさせるように指示しても、ループしません。また、ループさせるために onended 属性でループさせることも試みました (例 この Mozilla サポートスレッド のように、私はまた、jQueryのそのビットを試してみました)。これまでのところ、何も動作していません。それはChromeの問題か、私のコードの問題か?

編集してください。

作業コピーのNetworkイベントとHEADを確認したところ( http://fhsclock-labs.heroku.com/no-violence ) と私が動作させようとしているアプリケーションのネットワークイベントと HEAD をチェックしました。違いは、作業コピーが Heroku 上の静的アセットから (Varnish を介して) ビデオを提供しているのに対し、私のは GridFS (MongoDB) から提供していることです。

Chrome のインスペクターのネットワーク タブでは、私のアプリケーションで、動画が 3 回要求されていることが示されています。1 回は状態が "pending"、2 回目は "canceled" で、最後の 1 回は 200 OK です。作業コピーには 2 つのリクエストしか表示されません。1 つのステータスは保留中で、もう 1 つは 206 Partial Content です。しかし、ビデオが一度再生されると、そのリクエストは "Cancelled" に変わり、そのビデオに対して別のリクエストが行われます。私のアプリケーションでは、これは起こりません。

Type については、私のアプリケーションでは、2 つは "undefined" で、もう 1 つは "video/mp4" (これは本来そうであるべきです) です。動作中のアプリでは、すべての要求が "video/mp4" となっています。

さらに、私は Resource interpreted as Other but transferred with MIME type undefined. の警告がコンソールに表示されます。

この件に関してどこから始めればよいのかよくわかりません。静的資産としてファイルを提供するとうまくいくので、問題はサーバー側にあると私は考えています。サーバーが正しいコンテンツ タイプを送信していない可能性があります。GridFSの問題かもしれません。私は知りません。

とりあえず、ソースは ここで . どんな洞察でも構いませんので、よろしくお願いします。

どのように解決するのですか?

ああ、まさにこの問題につまずきました。

結論から言うと、ループ(または 任意の のシーク) は <video> 要素のシークが機能するのは、ビデオ ファイルが 部分的なコンテンツ リクエスト すなわち、サーバーは、206 "Partial Content" レスポンスで "Range" ヘッダを含むリクエストを処理する必要があります。これは、動画がクロームによって完全にバッファリングされるほど小さく、サーバー ラウンド トリップが行われない場合にも当てはまります。サーバーがクロームの Range 要求を最初に満たさない場合、動画はループまたはシークできません。

つまり、GridFS の問題ですが、間違いなく Chrome はより寛容であるべきです。