WordPress：如何在移动设备上删除视频？

Question

在我的网上商店www.spidercatcher.dk 我希望背景视频只显示在 PC 上，然后在手机和平​​板电脑上放一张静态照片，当我设置海报标签时它有点工作，但我无法正确缩放海报标签，所以图片在手机上太大了，而且边距很奇怪。

有人可以帮忙吗？该网站是在 Wordpress、Woocommerce 中建立的，以 Flatshop 为主题。

这是 HTML 和 CSS 代码：

video# bgvid {
    position: static;
    margin - top: -15 % ;
    min - width: 100 % ;
    min - height: 100 % ;
    width: auto;
    height: auto;
    z - index: -100;
    background: transparent url(/wp-content/uploads / 2016 / 04 / Spidercatcher_vid_frame.jpg) no - repeat 0 0; - webkit - background - size: cover; - moz - background - size: cover; - o - background - size: cover;
    background - size: cover;
}

<video autoplay loop poster="/wp-content/uploads/2016/04/Spidercatcher_vid_frame.png" id="bgvid">
  <source src="/wp-content/uploads/2016/04/Spidercatcher_vid.mp4" type="video/mp4">
</video>

Answer 1

使用媒体查询 CSS 很容易。适用于移动设备和桌面设备

@media only screen and (max-width: 600px) {

video#bgvid {
display:none;
}

}

同样的，你可以根据你的屏幕尺寸设置它

@media only screen and (max-width: 320px) {


}

http://www.w3schools.com/css/css_rwd_mediaqueries.asp

http://cssmediaqueries.com/

Answer 2

不要使用 CSS 执行此操作，图像/视频仍会下载（加载时间较长）。使用 PHP 解决这个问题。

Answer 3

这可以使用media queries 或通过使用诸如Modernizr 之类的框架来实现。

将您的问题考虑为“如何将视频背景添加到能够正确显示它的设备”可能会更容易。通过从基本网站中删除视频并稍后使用媒体查询或modernizr 添加它。您还可以从其他可能也难以显示视频的浏览器中删除视频。例如盲人的屏幕阅读器。

所有方法的基本操作

首先为您希望最基本的浏览器看到的内容重写您的页面。想想 10 到 15 年前最糟糕的基于手机的浏览器，通过拨号连接工作，或者您希望人们在将您的页面打印到纸上时看到的内容。

CSS 媒体查询方法

将视频块的可见性设置为隐藏。然后为特定屏幕尺寸（比如 700 像素）的浏览器添加视频效果

@media only screen and (min-width: 700px) {
video#bgvid {
visibility: visible 
}

这仍然意味着所有浏览器都会下载视频，并减慢页面速度。

jQuery 方法

你可以使用 jQuery 和 Javascript 来做同样的事情

if(window.screen.width >700){
$("#bgvid").html("<video>...</video>")

其他

您可以在此处采用其他方法来实现此目的，请查看 Modernizr 之类的框架。但本质上，如果你反过来——即为移动设备构建网站，然后添加设备可以使用的内容，你可能会更好。我通常会建议 jQuery 往往比 CSS 媒体查询更令人愉悦。根据我的经验，您在使用不兼容的浏览器时遇到的问题往往较少。

Answer 4

正如@juul van bracht 补充的那样，使用 css 将其隐藏在移动设备上并不是一个好主意。

最好和最有效的方法是使用 php/wordpress 函数：

<?php
if (!wp_is_mobile()) {?>
    <video autoplay loop poster="/wp-content/uploads/2016/04/Spidercatcher_vid_frame.png" id="bgvid">
    <source src="/wp-content/uploads/2016/04/Spidercatcher_vid.mp4" type="video/mp4">
    </video>
<?php } else { ?>
    <img src="whatever.jpeg"/>
<?php }  ?>

Answer 5

如果您的视频在 div 中并且您正在尝试：

 var video = document.getElementById('video_id');
 video.src = "" 

那是行不通的。你必须这样做：

document.querySelectorAll('#video')[0].src = "';