我希望有人能帮助我。我正在寻找改变目前播放的视频英雄面板上的主页，以显示一个图像，而不是。当然，我可以使用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（）。除了元素本身之外，还将删除与元素关联的所有绑定事件和jQuery数据。