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
You're running into a CORS issue.
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.
The file is from another server with CORS enabled, or from file:///, and such is not allowed for security reasons.
Basically,
a remote server should serve files with a header like:
Access-Control-Allow-Origin "*"
than you could access it by adding this line to your JS file:
video.crossOrigin = "anonymous";
or using the HTML attribute
<!-- Distant server allows CORS -->
<video crossorigin="anonymous" ...
but, If that header is not present — you are out of luck.
More info: