Safariで短いHTML5動画で再生を強制する

Question

私はSafariの問題と、より短い高品質の動画と組み合わせて<video>要素の問題に取り組んでいます。ショーケースのウェブサイトでは、<source>要素を使用して、<video>コンテナに12から15秒の.mp4と.webmファイルをロードしています。 Chromeでビデオを再生しようとすると、完璧に動作し、ビデオはほぼ即座に再生されますが、再生を開始する前にビデオを完全にロードしたいように見えます。

私はビデオを直接のsrc属性を介して読み込み、即時再生を強制するためにpreload="auto"属性を追加しました。私の周りで私たちはウェブサイト上で使用した動画の1を、使用例を設定した

8メガバイトと長い12秒：あなたは、私はまたのために聞いて見ることができるようにhttps://jsfiddle.net/n1eac46v/

var video = document.getElementById('video'); 
var source = document.createElement('source'); 

source.src = "foo.mp4"; 
source.type = "video/mp4"; 

video.appendChild(source); 
video.on("canplay canplaythrough", video.play); 

canplayとcanplaythroughというイベントが発生しますが、それでも役立たないようです。私は終わりの日のための場所のいたるところを見てきましたが、オプションの現在実行中です。

Answer 1

私はOS Xユーザーではないので、私はSafariでの経験はありませんが、Chromeでmp4再生をデバッグする機会がありました。クロムにはバッファリングウィンドウがあり、実際の再生が開始されるまで埋めます。 Safariのウィンドウが大きくなることがあります。また、通常の場合、サンプル位置、継続時間などを含むすべてのテーブルは、ファイルブラウザの最後にあるため、再生を開始するためにそれらを読み取ることができます。スマートブラウザは、ファイルの最後だけを取得してから実際のビデオデータを検索するために、バイト範囲ヘッダーで読み込みをディスパッチできますが、再びサファリが何をしているのかわかりません。

あなたのビデオファイルにMP4Boxを使用して、メタデータとすべてのテーブルを最初に移動すると、役立つ可能性があります。

-movflags faststart（FFmpeg MP4 options参照）のFFmpegを使用したコメントでOPが述べたように、これを達成するために使用することもできます。