html5: muestra el video dentro del canvas

¿es posible mostrar un video html5 como parte del canvas?

básicamente de la misma manera que dibujas una imagen en el canvas.

context.drawVideo(vid, 0, 0); 

¡Gracias!

 var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var video = document.getElementById('video'); video.addEventListener('play', function () { var $this = this; //cache (function loop() { if (!$this.paused && !$this.ended) { ctx.drawImage($this, 0, 0); setTimeout(loop, 1000 / 30); // drawing at 30fps } })(); }, 0); 

Supongo que el código anterior es auto explicativo, si no deja caer un comentario a continuación, voy a tratar de explicar las pocas líneas de código anteriores

Editar :
aquí hay un ejemplo en línea, solo para ti 🙂
Manifestación

 var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var video = document.getElementById('video'); // set canvas size = video size when known video.addEventListener('loadedmetadata', function() { canvas.width = video.videoWidth; canvas.height = video.videoHeight; }); video.addEventListener('play', function() { var $this = this; //cache (function loop() { if (!$this.paused && !$this.ended) { ctx.drawImage($this, 0, 0); setTimeout(loop, 1000 / 30); // drawing at 30fps } })(); }, 0); 
 

Usar canvas para mostrar videos

Mostrar un video es muy parecido a mostrar una imagen. Las pequeñas diferencias tienen que ver con los eventos de carga y el hecho de que necesitas renderizar el video en cada fotogtwig o solo verás un fotogtwig, no los cuadros animados.

La demostración a continuación tiene algunas diferencias menores con el ejemplo. Una función de silencio (debajo del video, haga clic en silenciar / sonido para alternar el sonido) y alguna comprobación de errores para capturar IE9 + y Edge si no tienen los controladores correctos.

Mantener las respuestas al día

Las respuestas anteriores de user372551 están desactualizadas (diciembre de 2010) y tienen un defecto en la técnica de representación utilizada. Utiliza el setTimeout y una tasa de 33.333 … ms, que setTimeout redondeará a 33 ms, esto hará que los fotogtwigs se eliminen cada dos segundos y que puedan caer muchos más si la velocidad de fotogtwigs del video es superior a 30. El uso de setTimeout también introducir el corte de video creado porque setTimeout no se puede sincronizar con el hardware de la pantalla.

Actualmente no hay un método confiable que pueda determinar la velocidad de fotogtwigs de un video, a menos que conozca la velocidad de fotogtwigs de video por adelantado, debe mostrarla a la velocidad máxima de actualización de pantalla posible en los navegadores. 60 fps

La respuesta principal dada fue por el momento (hace 6 años) la mejor solución ya que requestAnimationFrame no fue ampliamente compatible (si es que lo hizo) pero requestAnimationFrame ahora es estándar en los principales navegadores y debe utilizarse en lugar de setTimeout para reducir o eliminar los fotogtwigs caídos. y para evitar el cizallamiento.

El ejemplo de demostración.

Carga un video y lo establece en loop. El video no se reproducirá hasta que haga clic en él. Al hacer clic nuevamente se pausará. Hay un botón de silencio / sonido debajo del video. El video está silenciado por defecto.

Tenga en cuenta los usuarios de IE9 + y Edge. Es posible que no pueda reproducir el formato de video de WebM ya que necesita controladores adicionales para reproducir los videos. Se pueden encontrar en tools.google.com Descargar el soporte de IE9 + WebM

 // This code is from the example document on stackoverflow documentation. See HTML for link to the example. // This code is almost identical to the example. Mute has been added and a media source. Also added some error handling in case the media load fails and a link to fix IE9+ and Edge support. // Code by Blindman67. // Original source has returns 404 // var mediaSource = "http://video.webmfiles.org/big-buck-bunny_trailer.webm"; // New source from wiki commons. Attribution in the leading credits. var mediaSource = "http://upload.wikimedia.org/wikipedia/commons/7/79/Big_Buck_Bunny_small.ogv" var muted = true; var canvas = document.getElementById("myCanvas"); // get the canvas from the page var ctx = canvas.getContext("2d"); var videoContainer; // object to hold video and associated info var video = document.createElement("video"); // create a video element video.src = mediaSource; // the video will now begin to load. // As some additional info is needed we will place the video in a // containing object for convenience video.autoPlay = false; // ensure that the video does not auto play video.loop = true; // set the video to loop. video.muted = muted; videoContainer = { // we will add properties as needed video : video, ready : false, }; // To handle errors. This is not part of the example at the moment. Just fixing for Edge that did not like the ogv format video video.onerror = function(e){ document.body.removeChild(canvas); document.body.innerHTML += "

There is a problem loading the video


"; document.body.innerHTML += "Users of IE9+ , the browser does not support WebM videos used by this demo"; document.body.innerHTML += "
Download IE9+ WebM support from tools.google.com
this includes Edge and Windows 10"; } video.oncanplay = readyToPlayVideo; // set the event to the play function that // can be found below function readyToPlayVideo(event){ // this is a referance to the video // the video may not match the canvas size so find a scale to fit videoContainer.scale = Math.min( canvas.width / this.videoWidth, canvas.height / this.videoHeight); videoContainer.ready = true; // the video can be played so hand it off to the display function requestAnimationFrame(updateCanvas); // add instruction document.getElementById("playPause").textContent = "Click video to play/pause."; document.querySelector(".mute").textContent = "Mute"; } function updateCanvas(){ ctx.clearRect(0,0,canvas.width,canvas.height); // only draw if loaded and ready if(videoContainer !== undefined && videoContainer.ready){ // find the top left of the video on the canvas video.muted = muted; var scale = videoContainer.scale; var vidH = videoContainer.video.videoHeight; var vidW = videoContainer.video.videoWidth; var top = canvas.height / 2 - (vidH /2 ) * scale; var left = canvas.width / 2 - (vidW /2 ) * scale; // now just draw the video the correct size ctx.drawImage(videoContainer.video, left, top, vidW * scale, vidH * scale); if(videoContainer.video.paused){ // if not playing show the paused screen drawPayIcon(); } } // all done for display // request the next frame in 1/60th of a second requestAnimationFrame(updateCanvas); } function drawPayIcon(){ ctx.fillStyle = "black"; // darken display ctx.globalAlpha = 0.5; ctx.fillRect(0,0,canvas.width,canvas.height); ctx.fillStyle = "#DDD"; // colour of play icon ctx.globalAlpha = 0.75; // partly transparent ctx.beginPath(); // create the path for the icon var size = (canvas.height / 2) * 0.5; // the size of the icon ctx.moveTo(canvas.width/2 + size/2, canvas.height / 2); // start at the pointy end ctx.lineTo(canvas.width/2 - size/2, canvas.height / 2 + size); ctx.lineTo(canvas.width/2 - size/2, canvas.height / 2 - size); ctx.closePath(); ctx.fill(); ctx.globalAlpha = 1; // restre alpha } function playPauseClick(){ if(videoContainer !== undefined && videoContainer.ready){ if(videoContainer.video.paused){ videoContainer.video.play(); }else{ videoContainer.video.pause(); } } } function videoMute(){ muted = !muted; if(muted){ document.querySelector(".mute").textContent = "Mute"; }else{ document.querySelector(".mute").textContent= "Sound on"; } } // register the event canvas.addEventListener("click",playPauseClick); document.querySelector(".mute").addEventListener("click",videoMute)
 body { font :14px arial; text-align : center; background : #36A; } h2 { color : white; } canvas { border : 10px white solid; cursor : pointer; } a { color : #F93; } .mute { cursor : pointer; display: initial; } 
 

Basic Video & canvas example

Code example from Stackoverflow Documentation HTML5-Canvas
Basic loading and playing a video on the canvas


Loading content.


Attribution in the leading credits.

Necesita actualizar el elemento de video currentTime y luego dibujar el marco en canvas. No inicie el evento play () en el video.

También puedes usar por ej. este complemento https://github.com/tstabla/stVideo

Me gustaría proporcionar una solución que utiliza una syntax más moderna y es menos detallada que las ya proporcionadas:

 const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); const video = document.querySelector("video"); video.addEventListener('play', () => { function step() { ctx.drawImage(video, 0, 0, canvas.width, canvas.height) requestAnimationFrame(step) } requestAnimationFrame(step); }) 

Algunos enlaces útiles:

  • Documentación de MDN para window.requestAnimationFrame ()
  • ¿Puedo usar requestAnimationFrame?