ウィンドウがロードされている間にフルスクリーンビデオフォアグランドを追加する

Question

ウェブページがバックグラウンドで読み込まれている間に、フォアグラウンドでビデオを再生する（13秒間フル）ビデオを再生するためのヘルプが必要です。

私は帯域幅の制限があるので、理想的にはYouTubeや別のホストされたURLで動画を再生したいと思いますが、代替手段がない場合でも自己ホスティングが可能です。

私は

<video autoplay loop muted poster="screenshot.jpg" id="background"> 
<source src="/sample-video.mp4" type="video/mp4"> 
</video> 

を行うと、それon loadを隠していませんが、よりエレガントな解決策を持っている場合、私は実際にいくつかの助けを使用することができますことができます。

Answer 1

bigvideo.jsまたはVideなどのプラグインを使用すると、フルスクリーンのビデオ背景を簡単に追加および管理し、サイトコンテンツを下にレンダリングし、サイトの読み込み+動画の完成後に動画をフェードアウトできます。それぞれのプラグインのドキュメントをチェックして、探している効果を達成するためのビデオイベントがあるかどうかを確認してください。

ページの読み込みとセットアップに関する限り、私は上記の懸念に同意します。スクリプトと要素が利用可能になるとすぐにビデオを起動することができます。そのような場合は、あなたのビデオができるだけ明るいものであることを確認したいでしょう。小さなプリローダーやその他の負荷通知を使用し、ビデオ要素+スクリプトを読み込み、可能な限り早く再生を開始し、その後、他のスクリプトとDOMをキューに入れます。