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

Question

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

我想要做的是，然后停止其他两个视频的预加载。

这可能吗？换句话说，HTML5视频标签的“预加载”属性可以用一些Javascript来取消或停止运行吗？

Answer 1

使用jQuery，你可以尝试：

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

我不知道，这将阻止一个已经预加载视频。

从用户界面的角度来看，你为什么要同时预装全部3个视频？这会减慢所有三种的加载速度;如果您只预先加载其中一个视频，则在用户开始查看视频之前，会有更多视频有机会进行缓冲。

我建议预加载其中一个默认质量的视频，并且只在用户选择时加载不同质量的视频。这是YouTube，Netflix和其他人使用的行为。

Answer 2

我刚想出了一个解决方案，我遇到了类似于你自己的问题。我在我的页面上预加载了一系列电影列表，但我需要能够跳到其中一个，并在可能已经预加载的任何内容之前对其进行优先排序，以便尽快播放。

我有一个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(); 

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

Answer 3

有专用标记时下：

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