javascript 为移动用户删除 html5 视频背景的最佳方法是什么
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24609127/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the best way to remove html5 video background for mobile users
提问by user3812110
EXPLANATION: A customer of mine wants to have a background video running on his responsive website. However he would also like to remove it for tablet/mobile users. I know this can be done with media queries, but the video would still load as part of the DOM and that is what i would like to prevent.
解释：我的一个客户想要在他的响应式网站上运行一个背景视频。但是，他也想为平板电脑/移动用户删除它。我知道这可以通过媒体查询来完成，但视频仍然会作为 DOM 的一部分加载，这就是我想要阻止的。
QUESTIONS:
问题：
Can the video element be removed using JavaScript/jQuery from the DOM when it loads view-port at certain widths?
Can the same video be recovered when if the view port is manually increased in with? (i suspect this is a bad approach)
Will a video with "display:none;" still affect loading/battery time on a tablet/mobile ?
当视频元素以特定宽度加载视口时，是否可以使用 JavaScript/jQuery 从 DOM 中删除视频元素？
如果手动增加视口，可以恢复相同的视频吗？（我怀疑这是一个不好的方法）
将带有“显示：无；”的视频 仍然影响平板电脑/手机上的加载/电池时间？
Thanks you for you assistance.
谢谢你的帮助。
回答by Chandra Reddy
Based on mobile dimensions use $('video').remove(). this will removes the DOM element from webpage. so it will not render in html.
基于移动维度使用$('video').remove(). 这将从网页中删除 DOM 元素。所以它不会在 html 中呈现。
回答by Anton Koenig
You could also use css. This is much easier.
你也可以使用css。这要容易得多。
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
video {
display:none;
}
}
Then have an image with a negative z-index, that way when the video is not displayed, the image will appear.
然后有一个负 z-index 的图像，这样当视频没有显示时，图像就会出现。
回答by Jb Drucker
See this answerto detect if you're on a mobile device.
请参阅此答案以检测您是否使用移动设备。
Then, using this test, you can .hide()your element using jQuery, or set its srcattribute to "", to be sure it's not downloading.
然后，使用此测试，您可以.hide()使用 jQuery来创建元素，或将其src属性设置为""，以确保它不会被下载。
