HTMLでビデオを読み込むタイミングは何ですか

Question

ユーザーがボタンをクリックしたときにオーバーレイdivを表示するWebページを作成していました。 overlay divの1つは、表示されると自動的にビデオを再生し、他のものはピクチャを表示します。以下は、玉コードの一部です。

div.overlay#video-content 
    div.video 
     video#vid-name(controls loop) 
      source(src="/video/video.mp4" type="video/mp4") 
div.overlay#pic-content 
    div.pic-1 
     img.des(src="/images/picture-1.png") 

Google Developer Toolの[ネットワーク]ページには、HTML、CSS、JavaScript、および画像ファイルの時間とファイルサイズが表示されます。 が表示されているときにページがビデオを再生することはできますが、ビデオファイルをロードする時間と時間をデベロッパーツールに表示しません。

いつブラウザがビデオコンテンツを取得するのだろうか？私はブラウザからサーバからリソースを取得せずにこのビデオを再生する方法がないと信じています。

P.S.私はctrl + F5を使用してブラウザにすべてのリソースのサーバーを要求するようにしました。

Answer 1

サーバーがバイト範囲の要求をサポートしている場合、ブラウザは一般的にビデオを「チャンク」で要求し、開始するのに十分な情報があるとすぐに再生を開始します。

標準のMP4ファイルの最後にはメタデータがあります。つまり、すべてのチャンクをダウンロードするまでビデオを開始できません。

あなたは、さまざまなツールを使用して、より良いストリーミングを有効にする前にメタデータを移動するためにMP4を変更することができます - 1、QT-のFastStart詳細はこちらを参照してください。

• https://multimedia.cx/eggs/improving-qt-faststart/

の場合より良いユーザーエクスペリエンスが必要な場合は、アダプティブビットレートストリーミングをサポートする専用のビデオストリーミングサーバーを使用することをお勧めします。これにより、低品質から高品質の複数サイズのビデオが作成され、ブラウザーはサイズファイルから次のチャンクを要求します。現在のネットワーク条件を最も満たします。

このようにすれば、この機能を自分で再作成するのではなく、既存のビデオストリーミングサーバーを使用する方がよいでしょう。オープンソースのストリーミングサーバーの例は次のとおりです。

• https://gstreamer.freedesktop.org