html5 - reproducir - Coloque la etiqueta de video en la etiqueta de Canvas

insertar audio mp3 en html

Question

Me gustaría poner el reproductor de video en el lienzo.

(Dado que mi video es un canal alfa y me gustaría reproducir el video en jpg)

Hice un código como este a continuación html

<video id="mainVideo" src="item0.mp4">
</video>
<canvas id="mainCanvas">
</canvas>

mi css

#mainCanvas {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 400;
    height: 400;
}

#mainVideo {
    position: absolute;
    top: 300;
    left: 300;
    margin: -50px 0 0 -50px;
}

mi javascript

document.addEventListener(''DOMContentLoaded'', function(){
    var canvas = document.getElementById(''mainCanvas'');
    var context = canvas.getContext(''2d'');
    var img = new Image();
    img.src = "image.jpg";
    context.drawImage(img, 0,0)
},false);

En mi pensamiento, muestra el jpg y el video en él.

Howevere, solo aparece el jpg, (¿el video puede estar oculto por lienzo?)

por favor, ¿cómo puedo pagar el video en jpg?

Mi idea (usar HTML y lienzo juntos) es correcta?

Answer 1

Puede dibujar imágenes y videos en lienzo html.

El lienzo puede usar objetos de imagen o elementos de video como su fuente de imagen.

Ambos se dibujan mediante comandos context.drawImage separados

Aquí está el código de ejemplo:

// reference to canvas and context
var canvas=document.getElementById("mainCanvas");
var context=canvas.getContext("2d");
var cw,ch;

// reference to video element
var v = document.getElementById(''mainVideo'');

// wait until video metadata is loaded
v.addEventListener( "loadedmetadata", function(e){

    // set the canvas size to the video size
    cw=canvas.width=v.videoWidth;
    ch=canvas.height=v.videoHeight;

    // listen for when user presses play
    v.addEventListener(''play'', function(){
        // start loop that displays video frames on canvas
        requestAnimationFrame(animate);
    },false);


}, false );   

// loop that displays video frames on canvas
function animate(time){

    // stop the loop if user stops video
    if(v.paused || v.ended){ return; }

    // draw the 1 current video frame on the canvas
    context.drawImage(v,0,0,cw,ch);

    // also draw your image on the canvas
    context.drawImage(img,0,0);

    // request another loop 
    requestAnimationFrame(animate);

}