Question

我的网站目前在桌面用户访问网页时在横幅中加载视频。目前视频已隐藏，但如果用户在移动设备上，仍会下载。如果屏幕尺寸低于某个数量，我想保持视频下载。我不确定如何解决这个问题，我知道可以与CSS一起使用的display:none但是这仍然会下载文件，如果视频不是＆＃，我不应该这样做39;根本不显示。

Answer 1

如果jQuery没问题，可以试试这里：

$(function(){
    if($(window).width()>640){ //add video only if screen width is above 640px
        $("body").append(yourVideoHere);
    }
});

Answer 2

您需要首先检查屏幕是否合适，然后加载视频源。这样的事情应该让你开始。

var videoElem = document.querySelector('video');
var yourThreshold = 600;
if (screen.availWidth >= yourThreshold) {
  videoElem.append('<source src="yourVideo.mp4" type="video/mp4"');
}

当然，您可以根据定位设备来确定您希望的具体程度。仅宽度可能还不够。

Answer 3

取决于您尝试加载视频的方式，我建议将preload属性设置为none的HTML5视频元素，以便视频不会自动开始下载。您还可以查看使用允许您根据屏幕分辨率交换视频文件的脚本，因此对于移动设备，您可以加载较小的视频大小，可以让您快速启动并运行的脚本是enquire.js。希望这可以帮助。

 [self.collectionView setContentInset:UIEdgeInsetsMake(300, 0, 0, 0)];

Answer 4

如何根据屏幕尺寸进行操作

查看其他答案，使用javascript测量屏幕尺寸，只添加视频标记，或设置源，如果屏幕尺寸足够大。

如果你使用jquery有一个问题，因为像<video>这样的.play()函数是javascript函数，并且不能用于jquery对象。

如何实际执行

针对避免将大型视频文件发送到没有可用带宽来处理它的设备的问题的当前最佳解决方案当前是服务器端，并且依赖于更加可靠的实际带宽度量。这是what YouTube do。

考虑以下两种情况：

我在家，我的智能手机通过wifi连接到我的高速互联网连接，信号很好，但我的屏幕分辨率报告为480px - 我为什么要拒绝视频？
我出了房子，我已经连接到火车上的wifi了，但信号太可怕了，我的屏幕尺寸报告为1600px所以我得到了一个巨大的视频，你的网站没有加载我访问你的竞争对手。

您可以找到有关此here at MDN的更多信息，以及关于其中一个关键工具ffmpeg here，或者您可以使用Any Video Converter在桌面GUI中执行类似操作完全控制视频。这很复杂也很困难，你最好还是使用第三方服务。

根据屏幕尺寸下载网站视频文件？

4 个答案: