他のhtml要素の前に動画を読み込むにはどうすればよいですか？

Question

私は背景ビデオを持ち、ユーザーエクスペリエンスを向上させるためのサイトを構築しました。現在、すべてのテキスト要素は背景ビデオの前に読み込まれます。私が望むのは、テキストが始まる前にビデオを最初にロードすることです。これをどのように達成できますか？以下は私が使用しているCSSとHTMLの抜粋です。あなたはまた、どのように著者は、ページのロード時にビデオをロードする必要があることを考えれば、プリロード属性が指定するサイトhttp://www.convenantkingsandqueens.academy

video.fullscreen { 
 
    position: fixed; 
 
    top: 50%; 
 
    left: 50%; 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
    width: auto; 
 
    height: auto; 
 
    z-index: -100; 
 
    transform: translate(-50%, -50%); 
 
}

<header id="page-top" class="header"> 
 
    <div class="container"> 
 
    <div class="text-vertical-center"> 
 
    <img src="images/tmw_logo.png" class="img-responsive logo_img" alt="Timeline Media Workx Logo" style="height: 200px; width: 450px;"> 
 
    <video class="fullscreen" src="videos/bkg/sample.mp4" autobuffer autoloop loop autoplay></video> 
 
    </div> 
 
    </div> 
 
</header>

Answer 1

を表示するには、このテストのURLを使用することができます。

preload属性を使用すると、最高のユーザーエクスペリエンスにつながると思われる内容について、作成者がブラウザにヒントを提供することができます。この属性は、場合によっては無視されることがあります。

<video class="fullscreen" src="videos/bkg/sample.mp4" autobuffer autoloop loop preload="metadata"></video> 

注：自動再生が存在する場合プリロード属性は無視されます。 IEブラウザでは動作しません