H5 Video 截取第一帧 Canvas 动态视频渲染、截取控制

         由于现在的新媒体技术、资源、客户体验、需求等也越来越广、多、高，作为HTML5中较为重要的 新媒体video视频API，也是用得非常之多。

           比如之前有个项目要在微信中做直播（半屏）播放（rtmp, m3u8等视频流），在IOS手机还好（听说ios手机微信没那么大的操控权限），而在Android手机下（Android系统毕竟是开源产品）， 只要在微信X5内核浏览器中播放视频 就会自动全屏，而且z-index层级也是最高的（当然以qq.什么的域名的视频就不全屏，这是腾讯自已的东西，爱怎么搞就怎么搞咯！

我们第三方开发者也没办法，后来他们又搞了一个同层策略 在video标签中加上 x5-video-player-type="h5" 属性，然而还是有一堆这那样的问题），然后不能发东西，打字聊天等【如有朋友已经解决的情况下，还请多多指教，在此先谢过了！！！】， 还有前两天有个项目就用到了, 其中有个需求就是要获取html5的video视频第一帧作为播放前的图片，还有自定义控制相关播放按扭等等。

           所以就和大家一起分享。如有更好解决办法的朋友，欢迎指导！

代码如下：

	
		
		
		
	

	
		

			
			
视频播放器-VIDEO
		
		
		

			

				

					
					
获取当前帧到-IMG
				
				

					
					
视频同步渲染到-CANVAS
				
			
		
	
		

			视频播放
			视频暂停
			音量增大
			音量减小
			视频全屏
			获取当前视频帧
			视频同步渲染
			渲染到body背景
		

		
注：请服务器中运行才有效果哦，如用：WampServer64环境将代码放在 www 目录下，如用phpStudy工具将站点目录指到这个文件！
	

	
	
	

 

问题提示：

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

经过查阅和分析，发现这个其实是由于视频文件所在的域和图片和页面所在域不同，出现跨域传输的问题。



解决方案：

因为： 【 如果视频文件所在的 域 和 当前index.html页面所在域不同，就会出现跨域传输的问题】，【及便是给img标签加上crossOrigin': 'anonymous' 貌似也没用！】。

所以： 请将 视频文件 和 当前index.html页面放在同一个域中，并在服务器中打开（用phpStudy工具等），才能正常运行。