遗憾的是，Chrome与其他HTML5浏览器一样，试图对下载的内容保持明智，并避免了不必要的带宽使用…这意味着有时我们会遇到次优的体验（具有讽刺意味的是，YouTube遭受了如此多的扩展影响强制进行更多的预缓冲！）
就是说，我并没有发现良好的服务器和良好的连接经常需要这样做- 但是，如果您需要某些东西，我发现的唯一解决方案就是大锤……使用Ajax下载该文件您要播放，然后将其加载到视频元素的源中。
下面的示例假定您的浏览器支持m4v / mp4-如果您不能保证（例如）Chrome，则可能要使用canPlayType测试为用户选择最合适的视频格式。您还需要进行测试，以查看其对所需大小的视频的处理效果如何（我尝试了一些较大的视频，但不确定该上限可以可靠处理的上限）
该示例也非常简单…它启动了请求，并且在加载时不与用户进行任何通信-对于您的尺寸视频，您可能想要显示进度条只是为了让他们感兴趣。 。
此过程的另一个缺点是，直到您完全下载了文件，它才开始播放- 如果您想更深入地从缓冲区动态显示视频，则需要开始研究最新的内容（目前），MediaSource
<!DOCTYPE html>
<html>
<head>
<title>Preload video via AJAX</title>
</head>
<body>
<script>
console.log("Downloading video...hellip;Please wait...")
var xhr = new XMLHttpRequest();
xhr.open('GET', 'BigBuck.m4v', true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
if (this.status == 200) {
console.log("got it");
var myBlob = this.response;
var vid = (window.webkitURL || window.URL).createObjectURL(myBlob);
// myBlob is Now the blob that the object URL pointed to.
var video = document.getElementById("video");
console.log("Loading video into element");
video.src = vid;
// not needed if autoplay is set for the video element
// video.play()
}
}
xhr.send();
</script>
<video id="video" controls autoplay></video>
</body>
</html>
602392714
清零编程群