如何停止视频的预加载（HTML5 - Javascript）

Question

我有一个带有视频播放器的网页，预加载了 3 个视频（同一视频的低质量、中质量和高质量）。然后，当用户单击与所需版本相对应的按钮时，视频将打开。

我想做的是停止另外两个视频的预加载。

这可能吗？换句话说，是否可以使用某些 Javascript 来取消或即时停止 HTML5 Video 标记的“预加载”属性？

Answer 1

使用 jQuery，您可以尝试：

$('#videoPlayerId').removeAttr('preload');

我不知道它会停止已经预加载的视频。

从 UI 角度来看，为什么要尝试同时预加载所有 3 个视频？这会减慢所有三个的加载速度；如果您只预加载其中之一，则更多视频将有机会在用户开始观看之前进行缓冲。

我建议预加载默认质量的视频之一，并且仅在用户选择时才加载不同质量的视频。这是 YouTube、Netflix 和其他公司使用的行为。

Answer 2

现在有专门的标签：

<video preload="none" ....>

Answer 3

我刚刚想出了一个解决方案来解决我遇到的与您类似的问题。我正在页面上预加载一系列电影列表，但我需要能够跳转到其中一个电影，并将其优先于可能已经预加载的电影，以便尽快播放。

我有一个 div#prebuffer 元素，用于保存预加载的视频，因为它们是缓冲的。当我需要忘记预加载时，我只需这样做：

var $video = $('#prebuffer video:last');
$video.find('source').attr('src', '');
$video[0].load();
// it has now stopped preloading.
// and then, because I don't want this half-loaded broken cruft hanging around:
$video.remove();

它有点难看，但我无法找到更好的方法。它完成了工作。