web-dev-qa-db-ja.com

HTML5ビデオはループしません

Webページの背景としてビデオがあり、それをループさせようとしています。コードは次のとおりです。

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

ビデオにループするように指示しましたが、ループしません。また、onended属性でループを取得しようとしました（ このMozillaサポートスレッド に従い、jQueryのビットも試しました）。これまでのところ何も機能していません。 Chromeの問題ですか、それともコードの問題ですか？

編集：

ネットワークイベントとHEAD（ http://fhsclock-labs.heroku.com/no-violence ）対アプリケーション違いは、作業コピーがHerokuの静的アセットからのビデオを提供している（明らかにVarnish経由）のに対して、私の場合はGridFS（MongoDB）から提供されていることです。

Chromeのインスペクターの[ネットワーク]タブには、私のアプリケーションでは、ビデオが3回要求されていることが示されています。 1回はステータスが「保留」で、2回目は「キャンセル」で、最後は200 OKです。作業コピーには2つの要求のみが表示されます。1つは保留中、もう1つは206部分コンテンツです。ただし、動画が1回再生されると、そのリクエストは「キャンセル」に変わり、その動画に対して別のリクエストが行われます。私のアプリケーションでは、それは起こりません。

Typeに関しては、私のアプリケーションでは、2つは「未定義」で、もう1つは「video/mp4」（これが想定されています）です。動作中のアプリでは、すべてのリクエストは「video/mp4」です。

また、Resource interpreted as Other but transferred with MIME type undefined.コンソールの警告。

私はこれからどこから始めるべきか本当に本当によくわかりません。ファイルが静的アセットとして機能するため、問題はサーバー側にあると考えられます。サーバーが正しいコンテンツタイプを送信していない可能性があります。 GridFSの問題である可能性があります。私は知らない。

とにかく、ソースは here です。あなたが提供できるあらゆる洞察は高く評価されています。

google-chromemime-typeshtml5-videorackgridfs
66
Ethan Turkeltaub

ああ、私はちょうどこの正確な問題につまずいた。

結局のところ、Chrome上の<video>要素上のループ（またはany種類のシーク）は、ビデオファイルはpartial content requestsを理解するサーバーによって提供されました。つまり、サーバーは206 "Partial Content"応答を持つ "Range"ヘッダーを含む要求を尊重する必要があります。ビデオがChromeによって完全にバッファリングされるほど小さく、サーバーラウンドトリップがこれ以上行われない場合：サーバーが最初にChromeのRangeリクエストを受け入れなかった場合、ビデオはループ可能またはシーク可能になりません。

はい、GridFSに問題がありますが、おそらくChromeはもっと寛容です。

117
afri

最も簡単な回避策：

_$('video').on('ended', function () {
  this.load();
  this.play();
});
_

_'ended'_イベントは、ビデオが最後に達すると発生し、video.load()はビデオを先頭にリセットし、video.play()はロードされるとすぐに再生を開始します。

これは、サーバーの応答をあまり制御できないAmazon S3でうまく機能します。また、ビデオの長さメタデータが欠落している場合、_video.currentTime_が設定できないことに関連するFirefoxの問題を回避します。

JQueryを使用しない同様のJavaScript：

_document.getElementsByTagName('video')[0].onended = function () {
  this.load();
  this.play();
};
_
16
d2vid

過去に問題であったように見えます。少なくとも2つのバグがクローズされていますが、どちらも修正されたと述べています。

http://code.google.com/p/chromium/issues/detail?id=3968

http://code.google.com/p/chromium/issues/detail?id=18846

ChromeとSafariはどちらもWebkitベースのブラウザを使用しているため、これらの回避策のいくつかを使用できる場合があります。 http://blog.millermedeiros.com/2011/03/html5- ipad-and-how-to-solve-them / ==

function restartVideo(){
vid.currentTime = 0.1; //setting to zero breaks iOS 3.2, the value won't update, values smaller than 0.1 was causing bug as well.
vid.play();
}

//loop video
vid.addEventListener('ended', restartVideo, false);
6
John

上記の回答のいずれも役に立たない場合は、キャッシュを無効にするオプションをオンにしてインスペクタを実行していないことを確認してください。 Chrome=はキャッシュからビデオを取得するので、基本的には1回動作します。これが原因であることに気付く前にこれを20分間デバッグしてください。 他の誰かのクロムバグレポート 。

3
srussking

私の状況：

私はまったく同じ問題を抱えていますが、応答メッセージのヘッダーを変更するだけでは何もしませんでした。ループ、リプレイ、シークはありません。また、純粋な停止は機能しませんが、それが私の構成である可能性があります。

回答：

いくつかのサイト（もう見つけられない）によると、ビデオが終了した直後、次のサイトが開始される前にload（）メソッドをトリガーすることも可能です。これによりソースがリロードされ、ビデオ/オーディオ要素が再び機能するようになります。

@ john

回答/リンクは通常のバグであり、この問題に焦点を合わせていないことに注意してください。この問題の原因は、サーバー/ウェブサーバーの使用です。これらのリンクで説明されているバグは別の種類のものです。それが答えがうまくいかない理由でもあります。

私はそれが役立つことを願っています、私はまだ解決策を探しています。

3
WhoKnows

それは非常に不自由ですが、Dropboxは正しいステータスコードを使用します。したがって、Dropboxにアップロードし、wwwをdlに置き換えます。

したがって、ドロップボックスのURLを使用すると、ビデオは正常に再生されます。

1
gabrielstuff