我有一个带有视频播放器的网页,其中预加载了 3 个视频(同一视频的低、中和高质量)。然后,当用户单击一个与所需版本相对应的按钮时,视频就会打开。
我想做的是停止预加载另外两个视频。
那可能吗?换句话说,HTML5 视频标签的“预加载”属性是否可以通过一些 Javascript 即时取消或停止?
我有一个带有视频播放器的网页,其中预加载了 3 个视频(同一视频的低、中和高质量)。然后,当用户单击一个与所需版本相对应的按钮时,视频就会打开。
我想做的是停止预加载另外两个视频。
那可能吗?换句话说,HTML5 视频标签的“预加载”属性是否可以通过一些 Javascript 即时取消或停止?
我刚刚想出了一个解决方案来解决我遇到的与您类似的问题。我正在我的页面上按系列预加载电影列表,但我需要能够跳转到其中一个并在可能已经预加载的任何内容之前对其进行优先级排序,以便尽快播放。
我有一个 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();
它有点难看,但我找不到更好的方法。它完成了工作。
使用 jQuery,您可以尝试:
$('#videoPlayerId').removeAttr('preload');
我不知道它会停止已经预加载的视频。
从 UI 的角度来看,您为什么要同时预加载所有 3 个视频?这会减慢所有三个的加载速度;如果您只预加载其中一个,则更多的视频将有机会在用户开始观看之前进行缓冲。
我建议预加载默认质量的视频之一,并且仅在用户选择时才加载不同质量的视频。这是 YouTube、Netflix 和其他公司使用的行为。
现在有专门的标签:
<video preload="none" ....>