H5+C3做出优酷视频截图结果-

本篇文章主要介绍了HTML5+CSS3摹仿优酷视频截图功能示例，在会员上传完成后，可以对播放的视频进行截图，非常拥有有用价值，需要的伴侣可以参照 下。 这次给大家带来H5+C3做出优酷视频截图结果，H5+C3做出优酷视频截图结果的注意事项是什么，下面就是实战案例，一起来看一下。

个别的视频网站关于会员上传的视频，在会员上传完成后，可以对播放的视频进行截图，然后作为视频的展现图。项目中也可以引入这样的功能给会员一种不错的体验，而不是让会员额外上传一张展现图。

结果图：

看起来还是很不错，下面我给大家剖析下，极其中心代码很简略：

_canvas = document.createElement("canvas");  
_ctx = _canvas.getContext("2d");  
_ctx.fillStyle = '#ffffff';  
_ctx.fillRect(0, 0, _videoWidth, _videoWidth);  
_ctx.drawImage(_video, 0, 0, _videoWidth, _videoHeight, 0, 0, _videoWidth, _videoHeight);  
var dataUrl = _canvas.toDataURL("image/png");

中心代码就这几行，应用了ctx.drawImage时，首先个参数可认为video对象，然后就是通过canvas拿到DataUrl，赋值给Img标签了。关键点就这些。

下面来看整个例子：

HTML:

  
  
  
      
      
  
      
  
    
    
    



    

    
打赏
    

    

    	
        
    	

    		
感谢您的支持，我会继续努力的!
    	
    	

    		
    	
    		
扫码打赏，你说多少就多少
    	

    		

	    		
	    		
    		
    		

	    		
	    		
    		
    	
    	

    		
打开支付宝扫一扫，即可进行扫码打赏哦
    		
百分百源码网 建议打赏1～10元，土豪随意，感谢您的阅读！