Canvas|Canvas + Video + Nginx截取跨域视频第一帧
1、同域情况：
文章图片
同域时代码
页面效果 如上图，将待播放的视频存放于项目路径中，即同域情况下可正常播放，使用canvas的drawImage方法可成功截取视频第一帧；
2、跨域情况
（1）跨域描述
【Canvas|Canvas + Video + Nginx截取跨域视频第一帧】跨域：协议类型、域名、端口号三者有一不一致即为跨域，根据浏览器同源策略，跨域请求的返回结果会被浏览器拦截。根据canvas的安全规则，跨域资源也无法被输出。
（2）nginx静态资源服务器
通过nginx搭建一个静态资源服务器，将待播放视频存放至静态资源服务器中，从而导致跨域问题。
文章图片
nginx静态资源配置 配置一下三个参数防止乱码以及展示资源大小、时间；
文章图片
nginx静态资源配置 特别需要注意的是，使用alias配置静态资源地址时，路径需要以/结尾。
文章图片
静态资源目录 访问静态资源地址，可看到放置其中的视频文件；
（3）跨域问题呈现
文章图片
播放静态资源服务器中视频文件 页面效果 如上图，视频仍能正常加载播放，而通过canvas输出的图片则由于跨域限制而无法获取。
（4）跨域问题解决
文章图片
video标签crossorigin属性添加 
文章图片
静态资源响应头配置 在video中添加属性crossorigin="*"，同时在配置静态资源响应头中加入'Access-Control-Allow-Origin' '*';
的配置即可；
展示效果 至此，问题解决；同理，使用其他服务器时只需在资源请求的响应头中添加上允许跨域的头部即可。
推荐阅读
- canvas（一）基本用法
- 监控nginx
- Linux|Linux 服务器nginx相关命令
- vue|vue canvas 手绘进度条动画
- canvas不过如此（一）
- Nginx|Nginx Tomcat 构造https服务应对苹果要求
- HTML|HTML canvas中translate()与rotate()的理解
- Nginx详细教程
- Nginx进阶(1)——nginx本地代理配置访问node服务
- linux操作集-配置keepalived+nginx实现双机热备