Display:none 用于视频元素，它还会被缓冲吗？答案

【问题标题】：Display:none for video element, will it still be buffered?Display:none 用于视频元素，它还会被缓冲吗？
【发布时间】：2017-07-27 21:11:44
【问题描述】：

我有一个网站，在首页标题下方播放视频，视频非常大，我正在使用媒体查询将其从移动浏览器等中删除。

它显示得很好，就像我想要的那样。

但我想知道，如果我只是将其设置为 display:none，它还会在后台缓冲吗？那么手机用户会无缘无故地减慢加载时间吗？如果是这种情况，我应该怎么做？

我搜索了这个问题，但只找到了一个远程相关的问题。但是在那里，问题是代码是否会被加载。而且我可以忍受加载额外的 HTML 行。所以这不是问题。

【问题讨论】：

使用浏览器的开发者工具看看会发生什么
通常浏览器不会加载加载为“display:none;”的元素但是像 j08691 告诉你的那样检查它。
如果你不通过javascript动态播放它不应该。
@j08691 - 我有点不确定要寻找什么，加载时间和大小在任一屏幕尺寸下都是相同的。

标签： html css responsive-design media-queries

【解决方案1】：

为了安全起见，我会先为包含display: none 的视频容器编写一个通用 CSS 规则，然后在 上方屏幕的媒体查询 (@media screen and (min-width: 768px) {...}) 中添加一个规则 包含display: block 的 768 像素（或任何你的断点）。

这将是一种移动优先的方法，确保它不会加载到较小的屏幕上。

【讨论】：

感谢移动优先提示-尽管它不能直接回答问题？ :-)
直到前段时间，我确信如果有一个通用的 CSS 规则首先是 display: block，那么图像/视频将也被加载到移动设备上，然后遵循通过使用display: none 对同一元素进行移动设备的媒体查询。但是随后在另一个问题中对此进行了一些讨论，并且似乎已经有一些较新的浏览器版本可以避免在这种情况下加载内容。我不确定这一点，所以正如我所说，为了安全起见，请使用这种移动优先的方法 - 在这种情况下，我确信桌面内容不会加载到移动设备上。
太棒了！我想那是最安全的方式，非常感谢你，我以后会这样做！ :-)

【解决方案2】：

似乎 Firefox（51.0.1 桌面）正在使用 display:none 加载图像。检测设备是否为移动设备并仅在不是时才加载视频不是更好吗？

类似这样的：

//only load video if screen width is greater than 768px
if(screen.width > 768){
    $('#video-container').html(videoHtml);
}

videoHtml 是您的视频元素。

您可以选择在移动设备上加载较低分辨率的视频：

//only load video if screen width is greater than 768px
if(screen.width > 768){
    $('#video-container').html(videoHtml);
}
else{
    $('#video-container').html(lowResVideoHtml);
}

但是，除了查看屏幕宽度之外，还有许多其他更好的方法可以检测设备是否为移动设备。一些方法见这个问题：https://stackoverflow.com/a/3540295/7353781

【讨论】：