默认情况下我们实现一个简单的 html5中 video 的播放器，只需要下面这段简单的代码就好，但是为了加载速度方面考虑，有时候我们需要用户进入页面后不加载视频，那么应该怎么操作呢？

    <video preload width="320" height="240" controls src="./static/videos/1.mp4"></video>

这个时候用户点击播放按钮就可以开始播放了。

视频不进行预加载

但是为了更好的用户体验，我们有的时候需要预加载视频，比如有的视频可能是在用户产生某些交互进行显示播放的。这个时候我们优先想到的是 preload 属性。
此属性用于定义视频是否预加载。属性有三个可选择的值：none、metadata、auto。如果不使用此属性，默认为auto。

  • None：不进行预加载。使用此属性值，可能是页面制作者认为用户不期望此视频，或者减少HTTP请求。
  • Metadata：部分预加载。使用此属性值，代表页面制作者认为用户不期望此视频，但为用户提供一些元数据（包括尺寸，第一帧，曲目列表，持续时间等等）。
  • Auto：全部预加载。

但是我们查看视频的请求，我们发现其实只预加载了一部分。它并没有自动进行全部视频内容的下载，这样的策略实际有利于节约用户宽带造成不必要的请求。

video 提供了 包括 play , pause , progress 等事件。当播放器处在不同的状态时候进行触发。其中 progress 会在视频进行下载的时候进行触发。



    
	
  1. 
		
    
			
    
				 
    
		
    
		
    
			
    
				　　video.addEventListener("progress", function() {
    
		
    
	
    2. 
	
  2. 
		
    
			
    
				 
    
		
    
		
    
			
    
				　　// When buffer is 1 whole video is buffered
    
				
    
				
    
				
    
				 
    
		
    
	
    3. 
	
  3. 
		
    
			
    
				 
    
		
    
		
    
			
    
				　　if (Math.round(video.buffered.end(0)) / Math.round(video.seekable.end(0)) === 1) {
    
		
    
	
    4. 
	
  4. 
		
    
			
    
				 
    
		
    
		
    
			
    
				　　// Entire video is downloaded
    
		
    
	
    5. 
	
  5. 
		
    
			
    
				 
    
		
    
		
    
			
    
				　　}
    
		
    
	
    6. 
	
  6. 
		
    
			
    
				 
    
		
    
		
    
			
    
				　　}, false);
    
		
    
	
    7. 




	通过 progress 事件我们可以确保我们的视频都能够缓冲完成。但是现代的浏览器都只会进行局部内容的下载，因为浏览器认为这段内容足够完成成功播放。因此，我们可以通过播放视频一会在暂停用于视频缓冲的方式在后台进行视频加载。

	

	总结：在视频未加载前是没有任何画面的，看起来比较单调，这时候我们需要做一个引导的图片作为视频的封面，实现起来很简单，只需要再加一个poster标签就好了~

	 


    <video preload width="320" height="240" controls src="/videos/1.mp4" poster="/videos/1.jpg"></video>