Set video poster [duplicate]

Question

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