HTML5動画がループしない
質問
ウェブページの背景として動画があるのですが、それをループさせようとしています。以下はそのコードです。
<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 はより寛容であるべきです。
関連
-
[解決済み] Google Chrome拡張機能でStripeのクレジットカードフォームを使用。"Payment not secure?" を回避できない。
-
[解決済み] ResizeObserver - ループの制限を超えました。
-
[解決済み] Google ChromeブラウザでF5 refreshとShift+F5の違いは何ですか?
-
[解決済み】HTML5動画の終了を検出する。
-
[解決済み】Chromeのconsole.logをファイルに保存する。
-
[解決済み] cssの変形でクロームの縁がギザギザになる
-
[解決済み] Chrome DevToolsのネットワークタブにある「転送」と「リソース」の違いは何ですか?
-
[解決済み] アンドロイドのウェブビューでHTML5ビデオをフルスクリーンで再生する
-
[解決済み] indexedDBを削除するには?
-
[解決済み] モバイル版Google Chromeはブラウザの拡張機能をサポートしていますか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Chromeで「Slow network detected...」というログが表示されるのはなぜですか?
-
[解決済み] ウェブサイト制作のためのChromeキャッシュの無効化
-
[解決済み] クロームでBasic認証の詳細をクリアする方法
-
[解決済み】Chromeデベロッパーツールを新しいウィンドウで開くには?
-
[解決済み】Google Chromeの拡張機能から現在のタブのURLを取得するにはどうすればいいですか?
-
[解決済み】「Upgrade-Insecure-Requests」HTTPヘッダーとは何ですか?
-
[解決済み] URLのロケーションハッシュ「#:~:text=`」とは一体何なのでしょうか?[クローズド]
-
[解決済み] HTML5でオンロードで無限にループする動画を再生する
-
[解決済み] Chromeで完全なリダイレクトパスとHTTPステータスコードを確認する
-
[解決済み] Samsung Galaxy S3 (android 4.3) で Chrome のリモートデバッグ (USB デバッグ) が機能しない