Question

我希望有人可以帮助我。我希望更改当前在主页上的英雄面板上播放的视频，以显示图像。当然我可以使用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();
}

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

Answer 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数据。

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

1 个答案: