javascript - 我可以在除台式机之外的所有东西上隐藏 html5 视频标签吗？

Question

有没有办法做到这一点？我不希望视频出现在平板电脑或手机上。

Answer 1

使用这样的 CSS 媒体查询：

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

这将隐藏所有屏幕宽度为 680 像素的 .video 类

编辑：您当然也可以反过来执行此操作，并默认设置.video为display: none，然后min-width在媒体查询中使用以实际从某个宽度显示它。

Answer 2

1. 使用 css 媒体查询或 JS 检测宽度
2. 安卓平板电脑在他们的浏览器用户代理中有“移动”，ios很容易检测到。
3. 使用modernizr检测对视频标签的支持。

Answer 3

是的，使用媒体查询：

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

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

    #video {
      visibility: hidden;
    }

}

对于小于 500 像素（或您确定的任何像素宽度）的屏幕尺寸，这将隐藏 ID 为“视频”的 div。