Question

我的网站上有一个以自动播放为背景的视频。但是，在iOS设备上，不再支持自动播放。相反，我想在这些设备上展示海报后备。唯一的问题是，你仍然可以看到播放按钮。这是我的代码：

<video autoplay loop muted preload poster="<?php echo $poster_src; ?>">
  <source src="<?php echo $video_mp4; ?>" type="video/mp4">
  <source src="<?php echo $video_webm; ?>" type="video/webm">
  <source src="<?php echo $video_ogg; ?>" type="video/ogg">
</video>

正如您所看到的那样，桌面上没有任何控件可以正常工作。如何摆脱iOS设备上的控件？

谢谢！

Answer 1

您可以使用媒体查询来检测IOS设备：

例如这一个：

iPad 1＆amp; 2景观

  @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : landscape)
    and (-webkit-min-device-pixel-ratio: 1)  
{ 
yourControl {
 visibility: hidden;
}
}

Answer 2

使用iOS的设备是iPad和iPhone，因此您应首先检测浏览器/设备类型，

<?php
    $browser_type = $_SERVER['HTTP_USER_AGENT'];
    $controls  = "controls";
    if(preg_match('/iphone|ipad/i', $browser_type))
    {
        $controls = "";
    }
?>

<video autoplay loop muted preload <?php echo $controls ?> poster="<?php echo $poster_src; ?>">
  <source src="<?php echo $video_mp4; ?>" type="video/mp4">
  <source src="<?php echo $video_webm; ?>" type="video/webm">
  <source src="<?php echo $video_ogg; ?>" type="video/ogg">
</video>

隐藏iOS设备上的html视频控件

2 个答案: