javascript - デスクトップ以外のすべてでhtml5ビデオタグを非表示にすることはできますか?

Question

それを行う方法はありますか？動画をタブレットや携帯電話に表示したくありません。

Answer 1

1. css メディア クエリまたは JS で幅を検出する
2. Androidタブレットのブラウザユーザーエージェントには「モバイル」があり、iosは簡単に検出できます。
3. modernizrで video タグのサポートを検出します。

Answer 2

次のような CSS メディア クエリを使用します。

@media screen and (max-width: 680px)
{
    .video { display : none; }
}

これにより、幅 680px までのすべての画面でクラス .video が非表示になります

編集:もちろん、これを逆にして、デフォルトでに設定.videoし、メディアクエリ内で使用して、特定の幅から実際に表示することもできます。display: nonemin-width

Answer 3

はい、メディアクエリで:

<div id="video">
  //Video here
</div>

@media only screen and (max-width: 500px) {

    #video {
      visibility: hidden;
    }

}

これにより、画面サイズが 500px (または任意のピクセル幅) より小さい場合、ID が「video」の div が非表示になります。