77

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

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

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

編集：

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

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

Type に関しては、私のアプリケーションでは、2 つは「undefined」で、もう 1 つは「video/mp4」(本来あるべき) です。動作中のアプリでは、リクエストはすべて「video/mp4」です。

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

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

何はともあれ、ソースはこちら。あなたが提供できるどんな洞察も高く評価されます。

4

9 に答える 9

137

ああ、まさにこの問題に遭遇しました。

結局のところ、Chrome の要素内でのループ (または、あらゆる種類のシーク) は、部分的なコンテンツ リクエスト<video>を理解するサーバーによってビデオ ファイルが提供された場合にのみ機能します。つまり、サーバーは、206 の「Partial Content」応答を持つ「Range」ヘッダーを含む要求を受け入れる必要があります。これは、ビデオが chrome によって完全にバッファリングされるほど小さく、それ以上サーバー ラウンド トリップが行われない場合にも当てはまります。サーバーが chrome の Range リクエストを最初に受け入れなかった場合、ビデオはループ可能またはシーク可能ではありません。 .

そうです、GridFS の問題ですが、間違いなく Chrome の方が寛容なはずです。

于 2012-03-03T20:02:20.817 に答える
22

最も簡単な回避策:

$('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();
};
于 2015-02-25T21:15:35.417 に答える
6

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

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

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

Chrome と Safari は両方とも Webkit ベースのブラウザーを使用するため、次の回避策のいくつかを使用できる場合があります 。 -それらを解決する/

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);
于 2011-11-11T01:32:27.973 に答える
5

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

于 2016-04-11T23:15:44.420 に答える
3

私の状況：

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

答え：

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

@ジョン

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

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

于 2012-12-05T09:45:04.490 に答える
1

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

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

于 2015-04-11T01:31:29.557 に答える