デスクトップ上のビデオ背景、モバイル上の画像は可能ですか？

Question

デスクトップビューにビデオの背景を持つウェブサイトを作成しようとしています（これは既に実装されており、機能しています）。モバイルデバイスにロードされると、イメージを表示します。

<div class="main">  
    <video autoplay muted loop> 
    <source src="Main-Stream.mp4" type="video/mp4"> 
    </video> 
    <div class="content container"> 
    <h1>Discover the Lifetarian Way</h1> 
    <a href="x" class="btn">Purchase the Book</a> 
    </div>    
</div> 

Answer 1

あなたはvideo要素にdisplay: noneを設定するには、メディアクエリを使用することができます。ただし、メディアクエリはページのサイズを決定するためにのみ役に立ちます。したがって、ヒューリスティックとして機能し、実際にデータが高価であるかどうかを判断できます。

接続のタイプ（モバイル/無線LAN）によって異なるものをおこなう場合は、navigator.connection APIのようなものが必要ですが、それは標準ではありません。