Set video poster

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

Your video is "from outside", that's what triggers the cross-origin tainting. — Kaiido, Feb 02 '22 at 00:02

Roko C. Buljan · Accepted Answer · 2022-02-02T00:21:06.103

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:

You can "paint" it, you can't do read backs. – Kaiido Feb 02 '22 at 00:03 — Kaiido, Feb 02 '22 at 00:03

Set video poster

1 Answers1