Question

我的HTML中嵌入了一个视频，如下所示：

<video autoplay loop data-hidden="xs">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

工作一种享受。但现在考虑应用以下CSS（注意视频标记上的[data-hidden]属性模块）：

@media (max-width: 767px) {
  [data-hidden~="xs"] { display: none !important }
}

现在，在移动设备上，视频应该有display: none!important;。这可以按预期工作，但我发现有时视频DOES上的自动播放属性启动，当我加载页面时视频开始自动播放，即使视频标签设置为不显示。我怎么能避免这个？

有没有更好的方法一起完成这一切？我真的不想在手机上加载视频，因为这显然会减慢网站的速度。

Answer 1

显示：没有问题，但在我的个人意见中，最好的方法是在您正在使用的任何服务器端术语中使用If语句。如果在移动设备上查看，这将阻止HTML完全呈现（而不是像CSS一样隐藏它）。

例如，这是一个半伪（可能正常但未经过测试）的PHP片段，可以执行此操作：

function CheckMobile() {
    return preg_match("/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos)/i", $_SERVER["HTTP_USER_AGENT"]);
}

if(CheckMobile()){
   continue;
}
else{
<video autoplay loop data-hidden="xs">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>
}

这基本上是说，除非用户不在移动浏览器上，否则不要再向他们展示视频标签。

就像我说的那样，我没有测试过上面的代码片段，所以它可能会也可能不会起作用，但是你得到了要点。

移动设备上的HTML视频自动播放

1 个答案: