首页 文章

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

提问于
浏览 次
1

我的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上的自动播放属性启动，当我加载页面时视频开始自动播放，即使视频标签设置为不显示 . 我怎么能避免这个？

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

html css video mobile

1 回答

  • 1

    显示：没有什么是好的，但在我的 personal 意见中最好的方法是在你正在使用的任何服务器端术语中使用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>
}

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

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

    回复于

相关问题