4

JavaScriptを使用して、特定の「プレイリストデータ」のセットからビデオプレーヤーを動的に生成しています。この再生リストデータは、基本的にビデオのリストです（各ビデオのソースURLとタイトル）。ユーザーがアンカーをクリックして「プレイリストをロード」すると、ビデオプレーヤーが作成されます。例を示したjsFiddleを次に示します。

http://jsfiddle.net/JFpCD/

ユーザーが最初にアンカーをクリックすると、ビデオプレーヤーが生成され、ビデオの再生が開始されます。ただし、アンカーをさらに2回クリックすると（1回閉じると2回開く）、プレーヤーは生成されますが、ビデオは再生されません。

この問題はChromeで発生します。Firefoxでは、ビデオは問題なく再び再生されます。

console.log();'loadedmetadata'イベントリスナー内に配置しました。これは、2回目にビデオをロードしようとしたときに、「loadedmetadata」が起動されなかったことを示しています。

Chromeのインスペクターの[ネットワーク]タブでこれをデバッグしようとしましたが、ビデオのリクエストに対して非常に奇妙な結果が得られます（2回目にプレイリストを開こうとしました）。.mp4ビデオファイルの取得を4回試行します。

  1. [ヘッダー]サブタブの下：

    リクエストURL：http：//platform.mybusinesscourse.com/videos/finman3e/guidedex_finman3e_01_endmodreview1.mp4

  2. [ヘッダー]サブタブの下：

    リクエストURL：http：//platform.mybusinesscourse.com/videos/finman3e/guidedex_finman3e_01_endmodreview1.mp4リクエストヘッダービューソースAccept-Encoding：identity; q = 1、*; q = 0 Range：bytes = 0- Referer：http：// fiddle.jshell.net/JFpCD/show/

  3. [ヘッダー]サブタブの下：

    リクエストURL：http：//platform.mybusinesscourse.com/videos/finman3e/guidedex_finman3e_01_endmodreview1.mp4

  4. [ヘッダー]サブタブの下：

    リクエストURL：http：//platform.mybusinesscourse.com/videos/finman3e/guidedex_finman3e_01_endmodreview1.mp4リクエストヘッダービューソースAccept-Encoding：identity; q = 1、*; q = 0 Range：bytes = 0- Referer：http：// fiddle.jshell.net/JFpCD/show/

4回の試行すべてについて、[応答]サブタブに応答がありません。ChromeはGETリクエストを完了していないようです。

私の知る限り、Apacheは206のパーシャルコンテンツリクエストを適切に処理しています。これは、ビデオが機能するタイミングを探すことができるためです。Chromeは206個のパーシャルコンテンツリクエストを送信し、サーバーは適切に応答します。

Chromeでのログインを有効にすることもできましたが、有用な情報は得られませんでした。

編集：

これをChromiumバグトラッカーに投稿しましたが、Chromeのバグとして確認されています： https ：//code.google.com/p/chromium/issues/detail？id = 168810

4

1 に答える 1

3

この問題の回避策を実装することができました。ここに戻って追加するのを忘れていました。どうやらChromeのバグは、ビデオの内部キャッシュの問題が原因であるようです。これを回避する方法は、ビデオのソースURLに一意の識別子を追加することです。これにより、Chromeは内部キャッシュからURLを取得しようとするのではなく、URLをクエリします。したがって、<source>既存のHTML5<video>タグに新しいタグを動的に挿入する場合は、次のようにします。

var html = '';

var mime_type = 'video/ogg';
var src_url = 'http://your-name.com/some-video.ogv';

// Fix for Chrome video / internal caching bug.
src_url += ('?' + (new Date().getTime() / 1000));

html += '<source';

html +=     ' src="' + src_url + '"';
html +=     ' type="' + mime_type + '"';

html +=     ' />';

$('#some-video-tag').html(html);
于 2013-10-10T22:07:33.580 に答える