设置视频海报

Question

我有这段代码=>

<video id="video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" data-setup='{ "playbackRates": [0.5, 1, 1.5, 2],"loopbutton": true  }'>
    <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
</video>

<canvas id="canvas" style="width: 640px !important; height: 268px !important"></canvas>

这是我的 JS =>

var canvas = document.getElementById('canvas');
var video = document.getElementById("video"); 
var cw = canvas.width = 200;
var ch = canvas.height = Math.round(cw / 1.7777);

function genT() {     
    var context = canvas.getContext('2d');
    context.drawImage(video, 0, 0, cw, ch);
    document.getElementById("video_html5_api").setAttribute("poster", canvas.toDataURL());
    //console.log(canvas.toDataURL()); //debug
}

video.addEventListener('pause', function() {
   genT();
});

每次我暂停视频时，我都想将视频海报更改为视频暂停时的帧，一切正常，但我无法设置视频海报。这是错误=> Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

@edit：我不是从外面带图片，我是从我的视频中“创建”图片，所以当我搜索这个时我不明白 CORS 政策。

我该如何解决？谢谢

Answer 1

您运行遇到了 CORS 问题。

^{MDN Docs}
Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources.

该文件来自另一台启用了 CORS 的服务器，或者来自 file:///，出于安全原因不允许这样做。

基本上，
远程服务器应该提供带有 header 的文件，例如：

Access-Control-Allow-Origin "*"

您可以通过将此行添加到您的 JS 文件来访问它：

video.crossOrigin = "anonymous";

或使用 HTML 属性

<!-- Distant server allows CORS -->
<video crossorigin="anonymous" ...

但是，如果那个 header 不存在——你就不走运了。

更多信息：

设置视频海报

Set video poster

html

javascript

canvas