Canvas + Video + Nginx截取跨域视频第一帧

1、同域情况：

同域时代码

页面效果

如上图，将待播放的视频存放于项目路径中，即同域情况下可正常播放，使用canvas的drawImage方法可成功截取视频第一帧；

2、跨域情况

（1）跨域描述

跨域：协议类型、域名、端口号三者有一不一致即为跨域，根据浏览器同源策略，跨域请求的返回结果会被浏览器拦截。根据canvas的安全规则，跨域资源也无法被输出。

（2）nginx静态资源服务器

通过nginx搭建一个静态资源服务器，将待播放视频存放至静态资源服务器中，从而导致跨域问题。

nginx静态资源配置

配置一下三个参数防止乱码以及展示资源大小、时间；

nginx静态资源配置

特别需要注意的是，使用alias配置静态资源地址时，路径需要以/结尾。

静态资源目录

访问静态资源地址，可看到放置其中的视频文件；

（3）跨域问题呈现

播放静态资源服务器中视频文件

页面效果

如上图，视频仍能正常加载播放，而通过canvas输出的图片则由于跨域限制而无法获取。

（4）跨域问题解决

video标签crossorigin属性添加

静态资源响应头配置

在video中添加属性crossorigin="*"，同时在配置静态资源响应头中加入'Access-Control-Allow-Origin' '*';的配置即可；

展示效果

至此，问题解决；同理，使用其他服务器时只需在资源请求的响应头中添加上允许跨域的头部即可。