1、同域情況：

同域時代碼

頁面效果

如上圖，將待播放的視頻存放于項目路徑中，即同域情況下可正常播放，使用canvas的drawImage方法可成功截取視頻第一幀；

2、跨域情況

（1）跨域描述

跨域：協(xié)議類型、域名、端口號三者有一不一致即為跨域，根據(jù)瀏覽器同源策略，跨域請求的返回結果會被瀏覽器攔截。根據(jù)canvas的安全規(guī)則，跨域資源也無法被輸出。

（2）nginx靜態(tài)資源服務器

通過nginx搭建一個靜態(tài)資源服務器，將待播放視頻存放至靜態(tài)資源服務器中，從而導致跨域問題。

nginx靜態(tài)資源配置

配置一下三個參數(shù)防止亂碼以及展示資源大小、時間；

nginx靜態(tài)資源配置

特別需要注意的是，使用alias配置靜態(tài)資源地址時，路徑需要以/結尾。

靜態(tài)資源目錄

訪問靜態(tài)資源地址，可看到放置其中的視頻文件；

（3）跨域問題呈現(xiàn)

播放靜態(tài)資源服務器中視頻文件

頁面效果

如上圖，視頻仍能正常加載播放，而通過canvas輸出的圖片則由于跨域限制而無法獲取。

（4）跨域問題解決

video標簽crossorigin屬性添加

靜態(tài)資源響應頭配置

在video中添加屬性crossorigin="*"，同時在配置靜態(tài)資源響應頭中加入'Access-Control-Allow-Origin' '*';的配置即可；

展示效果

至此，問題解決；同理，使用其他服務器時只需在資源請求的響應頭中添加上允許跨域的頭部即可。