Estoy tratando de reproducir un video en HTML Canvas. No tengo problemas, excepto cuando intento ocultar la fuente de video y solo mostrar el lienzo. En este caso solo obtengo una 'pantalla en blanco'. Si el elemento de video no está oculto, todo funciona como se esperaba. No quiero mostrar el elemento de video y el elemento de lienzo, solo quiero mostrar el elemento de lienzo que tiene la transmisión de video 'transmitiendo'. ¿Alguna sugerencia? Ejemplo de código adjunto...
let sourcevideo = document.getElementById("sourcevideo"); let outputcanvas = document.getElementById("outputcanvas"); let canvasctx = outputcanvas.getContext("2d"); function initCanvas() { outputcanvas.width = sourcevideo.videoWidth; outputcanvas.height = sourcevideo.videoHeight; console.log(outputcanvas.width, outputcanvas.height); drawVideo(); } function drawVideo() { canvasctx.drawImage( sourcevideo, 0, 0, outputcanvas.width, outputcanvas.height ); requestAnimationFrame(drawVideo); } sourcevideo.addEventListener("loadeddata", initCanvas); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="videocontainer"> <video id="sourcevideo" controls src="https://upload.wikimedia.org/wikipedia/commons/transcoded/c/c4/Physicsworks.ogv/Physicsworks.ogv.240p.vp9.webm"></video> </div> <canvas id="outputcanvas"></canvas> </body> </html>Primero, oculta la visibilidad de tu contenedor de video usando este $('#sourcevideo').css('visibility', 'hidden'); luego verá una imagen fija, para evitar que use autoplay="autoplay" , al hacer esto, su elemento de video se ocultará y su lienzo ejecutará correctamente el video.
let sourcevideo = document.getElementById("sourcevideo"); let outputcanvas = document.getElementById("outputcanvas"); let canvasctx = outputcanvas.getContext("2d"); function initCanvas() { outputcanvas.width = sourcevideo.videoWidth; outputcanvas.height = sourcevideo.videoHeight; console.log(outputcanvas.width, outputcanvas.height); drawVideo(); } function drawVideo() { canvasctx.drawImage( sourcevideo, 0, 0, outputcanvas.width, outputcanvas.height ); requestAnimationFrame(drawVideo); } sourcevideo.addEventListener("loadeddata", initCanvas); sourcevideo.style.visibility = 'hidden'; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div> <canvas id="outputcanvas"></canvas> </div> <div id="videocontainer"> <video id="sourcevideo" autoplay="autoplay" controls src="https://upload.wikimedia.org/wikipedia/commons/transcoded/c/c4/Physicsworks.ogv/Physicsworks.ogv.240p.vp9.webm"></video> </div> </body> </html>Puede configurar una clase CSS que incluya un estilo de display: none para que se aplique al elemento de video (como se ve en el código a continuación, .hidden {display:none;} ). Dado que la clase del elemento de video está configurada en el HTML, debe ocultar el elemento de video pero aún reproducir el video con autoplay al cargar la página.
El siguiente código muestra cómo puede aplicar display: none o visibility: hidden en distintas clases según sea necesario (usando botones en este ejemplo).
const sourcevideo = document.getElementById("sourcevideo"); const outputcanvas = document.getElementById("outputcanvas"); const canvasctx = outputcanvas.getContext("2d"); function initCanvas() { outputcanvas.width = sourcevideo.videoWidth; outputcanvas.height = sourcevideo.videoHeight; drawVideo(); } function drawVideo() { canvasctx.drawImage( sourcevideo, 0, 0, outputcanvas.width, outputcanvas.height ); requestAnimationFrame(drawVideo); } sourcevideo.addEventListener("loadeddata", initCanvas); .hidden { display: none; } <div id="videocontainer"> <canvas id="outputcanvas"></canvas> <video id="sourcevideo" class="hidden" controls autoplay src="https://upload.wikimedia.org/wikipedia/commons/transcoded/c/c4/Physicsworks.ogv/Physicsworks.ogv.240p.vp9.webm"></video> </div>