I have this piece of code =>
<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>
Here is my 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();
});
Everytime I pause the video, I want to change the video-poster to the frame that the video was paused, everything works perfectly but I'm unable to set video-poster. Here is the error => Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
@edit: I'm not bringing images from outside, I'm "creating" a image from my video, so I don't understand the CORS policy when I search about this.
How can I fix that? Thanks