Tengo este fragmento de código =>
<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>Aquí está mi 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(); }); Cada vez que pausa el video, quiero cambiar el póster de video al cuadro en el que se detuvo el video, todo funciona perfectamente, pero no puedo configurar el póster de video. Aquí está el error => Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
@editar: no estoy trayendo imágenes de afuera, estoy "creando" una imagen de mi video, así que no entiendo la política de CORS cuando busco sobre esto.
¿Cómo puedo arreglar eso? Gracias
Se está encontrando con un problema de CORS.
Documentos de MDN
El intercambio de recursos de origen cruzado (CORS) es un mecanismo basado en el encabezado HTTP que permite que un servidor indique cualquier origen (dominio, esquema o puerto) que no sea el suyo desde el cual un navegador debería permitir la carga de recursos.
El archivo es de otro servidor con CORS habilitado, o de file:/// , y no está permitido por razones de seguridad.
Básicamente,
un servidor remoto debería servir archivos con un encabezado como:
Access-Control-Allow-Origin "*"de lo que podría acceder agregando esta línea a su archivo JS:
video.crossOrigin = "anonymous";o usando el atributo HTML
<!-- Distant server allows CORS --> <video crossorigin="anonymous" ...pero, si ese encabezado no está presente, no tiene suerte.
Más información: