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

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

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>
}

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

就像我说的，我没有测试上面的代码片段，所以它可能有效也可能无效，但你明白了要点。