Question

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

它显示正常，就像我想要的那样。

但是我想知道，如果我只是将它设置为display：none，它还会在后台缓冲吗？那么手机用户将无缘无故地加载时间较慢？如果是这样的话，我应该怎么做呢？

我搜索了这个问题，但我发现了一个与此无关的问题。但问题是，代码是否会被加载。我可以加载额外的HTML行。所以这不是问题。

Answer 1

为了安全起见，我首先要为其中包含display: none的视频容器编写一般CSS规则，然后在媒体查询（@media screen and (min-width: 768px) {...}）中为屏幕添加规则以上 768px（或任何您的breakpont）包含display: block。

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

Answer 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

显示：视频元素无，它还会被缓冲吗？

2 个答案: