我可以在桌面以外的所有內容上隱藏html5視頻標記嗎？

Question

有沒有辦法做到這一點？ 我不希望視頻出現在平板電腦或手機上。

Answer 1

使用CSS媒體查詢，如下所示：

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

這將隱藏所有屏幕最大680px的class .video

編輯：當然，您也可以采用其他方法，並將.video設置為display: none默認情況下display: none ，然后在媒體查詢中使用min-width實際從某個寬度顯示它。

Answer 2

1. 使用CSS媒體查詢或JS檢測寬度
2. android平板電腦的瀏覽器用戶代理中包含“ mobile”，而ios易於檢測。
3. 使用modernizr檢測對視頻標簽的支持。

Answer 3

是的，使用媒體查詢：

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

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

    #video {
      visibility: hidden;
    }

}

對於小於500像素（或您確定的任何像素寬度）的屏幕尺寸，這將隱藏ID為“視頻”的div。