根据屏幕大小下载网站视频文件

Question

当桌面用户访问网页时，我的网站目前在横幅中加载视频。目前视频是隐藏的，但如果用户在移动设备上，仍然会下载。我想保持视频从下载，如果屏幕尺寸低于一定的计数。我不知道怎么做，我知道display:none可以和CSS一起使用，但这仍然可以下载文件，如果视频不播放，我宁愿不这样做。

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

取决于你如何尝试加载视频，我建议将HTML5视频元素的preload属性设置为none，这样视频就不会自动开始下载。你也可以考虑使用一个脚本，允许你根据屏幕分辨率交换视频文件，所以对于移动设备，你可以加载一个较小的视频大小，一个可以让你快速启动和运行的脚本是query .js。希望这对你有所帮助。

<video poster="image-location.jpg" preload="none">
    <source class="mp4" src="video-location.mp4" type="video/mp4">
    <source class="webm" src="video-location.webm" type="video/webm">
    <source class="ogg" src="video-location.ogv" type="video/ogg">
    <!-- Fallback Content such as embed YouTube video-->
</video>

Answer 4

如何根据屏幕大小设置

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

如果你使用jquery, <video>函数，如.play()是javascript函数，将不可用于jquery对象，这是一个问题。

如何实际操作

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

考虑以下两种情况:

1. 我在家里，我的智能手机通过wifi连接到我的高速互联网连接，信号很好，但我的屏幕分辨率报告为480px -为什么我要拒绝视频?
2. 我不在家里，我在火车上连接了wifi，但是信号很糟糕，我的屏幕尺寸报告为1600px，所以我得到了一个巨大的视频，你的网站无法加载，我去访问你的竞争对手。

你可以在MDN上找到更多关于这个的信息，以及关于关键工具之一的ffmpeg在这里，或者你可以使用任何视频转换器在桌面GUI中做类似的事情，如果你对视频有完全的控制。这很复杂，你最好使用第三方服务。