在移动设备上显示背景图像而不是背景视频

【问题标题】：Display background image on mobile instead of the background video在移动设备上显示背景图像而不是背景视频
【发布时间】：2015-09-17 19:09:42
【问题描述】：

我希望有人可以帮助我。我正在寻找更改当前在主页上的英雄面板上播放的视频以显示图像。当然，我可以使用 CSS 隐藏视频，但这仍然意味着视频会在后台加载，这不是我想要的。

这是我的html。

<video id="heroVideo" autoplay="" loop="" muted="" poster="../images/video-bg.jpg">
    <source src="../video/loop.webm" type="video/webm">
    <source src="../video/loop.mp4" type="video/mp4">
</video>

我做了以下似乎可行但想知道是否有更好的方法：

if (Modernizr.mq('only all and (max-width: 768px)')) {
    $('#heroVideo').detach();
}

这是正确的方法还是有更好的方法。

【问题讨论】：

标签： jquery html css video html5-video

【解决方案1】：

将此添加到您的 <head>....</head> 部分：

<script type="text/javascript">
    $(#heroVideo).remove();
</script>

或者只是编辑您当前的脚本并将detach替换为remove，如下所示：

if (Modernizr.mq('only all and (max-width: 768px)')) {
    $('#heroVideo').remove();
}

区别：

detach() : .detach() 方法与 .remove() 方法相同，不同之处在于 .detach() 保留与已删除元素关联的所有 jQuery 数据。

remove() ：当你想删除元素本身以及其中的所有内容时，请使用 .remove() 。除了元素本身，所有与元素关联的绑定事件和 jQuery 数据都将被移除。

【讨论】：