preload我们默认实现一个简单的H5播放器，只需要这么简单的代码：此时用户可以点击播放按钮开始播放。但是为了更好的用户体验，我们有时需要预加载视频。例如，当用户产生某些交互时，可以显示和播放一些视频。这时候我们首先想到的就是preload属性。此属性用于定义视频是否预加载。该属性具有三个可选值：none、metadata、auto。如果不使用此属性，则默认为自动。无：不预加载。使用这个属性值，可能是页面作者认为用户不期待这个视频，或者减少HTTP请求。元数据：部分预加载。使用这个属性值意味着页面的作者认为用户并不期待这个视频，而是为用户提供了一些元数据（包括大小、首帧、曲目列表、时长等）。自动：全部预加载。但是当我们查看视频请求时，我们发现实际上只有一部分是预加载的。它不会自动下载所有视频内容。这样的策略其实有利于节省用户的宽带，避免不必要的请求。video提供的事件包括play、pause、progress等。当播放器处于不同状态时触发。其中，进度会在视频下载完成时触发。 video.addEventListener("progress",function(){ //当缓冲区为1时，整个视频都被缓冲了 if(Math.round(video.buffered.end(0))/Math.round(video.seekable.end(0))===1){ //整个视频被下载 } },false);通过progress事件，我们可以保证我们的视频可以缓冲到完成。但是现代浏览器只会下载一部分内容，因为浏览器认为这些内容已经足够完成播放成功了。因此，我们可以通过播放视频并暂停视频缓冲来在后台加载视频。使用bloburl，我们其实可以使用ajax来请求资源。如果响应类型是blob，我们可以创建一个对象url。这个时候这个url的生命周期取决于文档创建的开始。//通过blob预加载src作为原视频的视频地址blob_load=(src)=>{constreq=newXMLHttpRequest();req.open('GET',src,true);req.responseType='blob';req.onload=function(){//即使在404上也会触发Onload//所以我们需要检查状态码if(this.status===200){constvideoBlob=this.response;constblobSrc=URL.createObjectURL(videoBlob);//IE10+//视频现在已下载//我们可以将其设置为视频元素上的源//video.src=blobSrc;console.log(blobSrc,'blobSrc已加载');}};req.onerror=function(){//错误};req.send();};测试结果发现通过图片改变了视频的src，但是播放的内容是一样的。通过bloburl，我们可以将整个视频缓存到本地，然后指定视频的播放位置即可快速播放。有操作视频，对时效性要求高的朋友，可以试试。
