为移动用户删除 html5 视频背景的最佳方法是什么答案

【问题标题】：What is the best way to remove html5 video background for mobile users为移动用户删除 html5 视频背景的最佳方法是什么
【发布时间】：2014-07-07 11:05:06
【问题描述】：

解释：我的一位客户希望在他的响应式网站上运行背景视频。但是，他也想为平板电脑/移动用户删除它。我知道这可以通过媒体查询来完成，但视频仍会作为 DOM 的一部分加载，这就是我想要阻止的。

问题：

当视频元素以特定宽度加载视口时，能否使用 JavaScript/jQuery 从 DOM 中移除视频元素？
如果手动增加视口，可以恢复相同的视频吗？（我怀疑这是一种不好的方法）
将带有“display:none;”的视频仍然会影响平板电脑/手机上的加载/电池时间？

感谢您的帮助。

【问题讨论】：

欢迎来到 Stack Overflow。请阅读Stack Overflow: How to ask 和Jon Skeet's Question Checklist，了解如何提出一个好的问题，从而产生好的有用的答案。

标签： javascript html responsive-design html5-video media-queries

【解决方案1】：

请参阅this answer 以检测您是否使用移动设备。

然后，使用此测试，您可以使用 jQuery .hide() 您的元素，或将其 src 属性设置为 ""，以确保它没有下载。

【讨论】：

谢谢 Jb 我认为这将是最好的解决方案 :)
我想注意这不会阻止用户下载视频。
使用modernizr或js检测视频元素是否可用，如果视频元素无效则不加载视频。

【解决方案2】：

根据移动尺寸使用$('video').remove()。这将从网页中删除 DOM 元素。所以它不会在 html 中呈现。

【讨论】：

【解决方案3】：

您也可以使用 css。这要容易得多。

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
    video {
        display:none;
    }
}

然后有一个负z-index的图像，这样当视频不显示时，图像就会出现。

【讨论】：

【解决方案4】：

不确定这是否有帮助，但此 sn-p 将停止在移动设备上播放视频，您也可以在此处静音音频，它应在此处显示后备 img。

const video = document.querySelectorAll('video')
              video.forEach(data=>{
                data.volume = 0 //mute audio
                console.log(data);
                  if (window.innerWidth <= 768) {
                      
                      data.autoplay=false; or //data.remove()
                  } else {
                      data.play();
                  }
                })

【讨论】：

帖子提到他们希望避免完全加载视频 - “但视频仍会作为 DOM 的一部分加载，这就是我想要阻止的。”
data.remove() 将完全删除视频元素，然后我们需要为此添加后备 img