html5背景ビデオと表示画像の代わりに互換性のないブラウザを検出する方法はありますか？

Question

私は、フルスクリーンの背景html5ビデオを持つページを設計しました。ページ本体にフォーム要素がオーバーレイされていました。 ChromeとFireFoxは、モバイルの相手と一緒にすべて正しくバックグラウンドでビデオを再生します。

しかし、私は別のモバイルブラウザ（xiaomi Webブラウザ）を試して、すべての画面上にwebmビデオを読み込み、フルスクリーン...ページ上の他のものをすべてブロックし、使用不可にしました。基本的に最悪のシナリオ。

ブラウザがビデオタグをサポートしていることを明確にしたいので、ポスター属性やビデオ要素の画像のネストは効果がありません。問題は、ビデオが読み込まれないということではなく、このような互換性のないディスプレイの問題に対処する明確な方法ではないように見えることです。うまくいけば、ページからビデオ要素をポップするブラウザーのユーザーがサイトを引き続き使用できるようにするいくつかの回避策があるといいでしょう。

互換性の低いブラウザではビデオを強制的にバックグラウンドで強制的に削除するか、ページの要素が検出されず、ビデオを強制終了するか、代わりに背景画像を使用する方法はありますか？

video#bgvid { 
 
    position: fixed; 
 
    top: 50%; 
 
    left: 50%; 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
    width: auto; 
 
    height: auto; 
 
    z-index: -1000; 
 
    background: url(images/particles.jpg) no-repeat; 
 
    background-size: cover; 
 
}

<video poster="images/particles.jpg" id="bgvid" playsinline autoplay muted loop> 
 
    <source src="images/particles.webm" type="video/webm"> 
 
    <source src="images/particles.mp4" type="video/mp4"> 
 
    <img alt="particles" src="images/particles.jpg" width="640" height="360" title="No video playback capabilities" /> 
 
</video>

注：ブラウザがvideotag WEBM互換性があり、ビデオが再生されます。しかし、それは他のすべての上に再生されます。残念ながら、標準フォールバックコードを使用して、画像を読み込むことができない場合に画像を読み込むことは効果がありません。

Answer 1

こんにちは親愛なるイム必ず多分それは以下のようにCSSの少しで動作しません：

.fullScreen { 
 
    height: 100vh; 
 
    background-color: lightblue; 
 
    color: "red"; 
 
}

<div class="fullScreen"> 
 
    <video poster="images/particles.jpg" id="bgvid" playsinline autoplay muted loop> 
 
    <source src="images/particles.webm" type="video/webm"> 
 
    <source src="images/particles.mp4" type="video/mp4"> 
 
    </video> 
 
</div>

は、しかし、私は「イムわからない」と言っていますが、それが悪いわけではありませんテストしてください