[英]Play button shows up on background image on mobile devices
So I've written this script that checks whether the visitor is using a mobile device or a desktop in order to determine whether to display a background video or not (if it's a mobile device the output will be static image instead). 所以我写了这个脚本,检查访问者是使用移动设备还是桌面,以确定是否显示背景视频(如果是移动设备,则输出将是静态图像)。
For some reason I end up seeing a play button centered overlaying the background image on the mobile layout. 出于某种原因,我最终看到一个播放按钮居中覆盖移动布局上的背景图像。 This is the code (note: site is based on WP and uses the wp_is_mobile()
function to determine device) - 这是代码(注意:站点基于WP并使用wp_is_mobile()
函数来确定设备) -
<section class="hero">
<?php
/*
Display background image
*/
if ( (get_field( 'hero_display' ) == 'image') || (wp_is_mobile()) ) :
$hero_image = get_field('hero_image');
?>
<div class="background-image" data-sm="<?php echo $hero_image['sizes']['sm']; ?>" data-md="<?php echo $hero_image['sizes']['md']; ?>" data-lg="<?php echo $hero_image['sizes']['lg']; ?>"></div>
<?php endif; ?>
<?php
/*
Display background video
*/
if ( (get_field( 'hero_display' ) == 'video') && (!wp_is_mobile()) ) :
?>
<div class="background-video">
<video autoplay="autoplay" preload="auto" poster="<?php the_field( 'hero_capture' ); ?>" loop="loop" muted="true" class="background-video">
<source src="<?php the_field( 'hero_source' ); ?>" type="video/mp4">
</video>
</div>
<?php endif; ?>
</section>
You may view the work in progress here - http://52.17.182.78 您可以在这里查看正在进行的工作 - http://52.17.182.78
Any help or directions is much appreciated. 非常感谢任何帮助或指示。
Edit: Solved! 编辑:解决了! There are some tricks required for everything to display correctly on iOS7+ (and also possible on Android devices), see this article - https://css-tricks.com/custom-controls-in-html5-video-full-screen/ 在iOS7 +上正确显示所有内容都需要一些技巧(也可以在Android设备上显示),请参阅此文章 - https://css-tricks.com/custom-controls-in-html5-video-full-screen/
Well, what about trying it the other way around? 好吧,那反过来试试呢? Make the image as default and if it is not on mobile, try to use video ;) 将图像设为默认图像,如果图像不在手机上,请尝试使用视频;)
尝试将属性controls =“false”添加到视频代码中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.