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

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;。这按预期工作，但我发现有时视频上的自动播放属性会启动，并且当我加载页面时视频会自动开始播放，即使视频标签设置为显示 none。我怎样才能避免这种情况？

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

Answer 1

Display:none 很好，但在我的个人看来，最好的方法是在任何服务器端术语中使用 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 视频在移动设备上自动播放

HTML video autoplaying on mobile

html

css

video

mobile