我希望有人能帮助我。我想更改当前在主页英雄面板上播放的视频以显示图像。当然，我可以使用 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();
}
这是正确的做法还是有更好的方法。
最佳答案
将此添加到您的 <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() 。除了元素本身，所有与元素关联的绑定(bind)事件和 jQuery 数据都被删除。
关于jquery - 在手机上显示背景图片而不是背景视频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32638213/