html5 - tamaño - Reproduzca video en lienzo y conserve el último cuadro/imagen en el lienzo

photoshop pegar imagen cambiar tamaño

Question

Estoy usando el siguiente código de script para dibujar un video en el lienzo:

$("#vPlayer").on(''play'', function (e) {
           var canvas = $(''canvas'')[0];
           var ctx = canvas.getContext(''2d'');
           var $this = this;
           canvas.width = 640;
           canvas.height = 480;
           (function loop() {
               if (!$this.paused && !$this.ended) {
                   ctx.drawImage($this, 0, 0, 640, 480);
                   setTimeout(loop, 1000 / 30); // drawing at 30fps
               }
           })();

});

El código funciona bien, pero en mi caso, quiero cambiar la fuente de video (atributo src) de la etiqueta de video cada 2 minutos. Cuando configuro src attr para el video y durante el tiempo de carga del video, el lienzo muestra una pantalla en blanco. ¿Cómo puedo conservar la última imagen del video y no borrar el lienzo?

Es un poco extraño, porque cuando no configuro el ancho y alto para el lienzo, el último cuadro se conserva, pero necesito establecer el tamaño.

Gracias de antemano.

Answer 1

Cada vez que configure el tamaño del lienzo, se borrará.

Para evitar esto, debe establecer el tamaño al principio, antes de comenzar a dibujarlo. En este caso, le recomendaría que lo configure fuera del controlador de eventos, así como la inicialización del lienzo y la variable de contexto:

var canvas = $(''canvas'')[0];
var ctx = canvas.getContext(''2d'');
canvas.width = 640;
canvas.height = 480;

$("#vPlayer").on(''play'', function (e) {
   var $this = this;
   (function loop() {
       if (!$this.paused && !$this.ended) {
           ctx.drawImage($this, 0, 0, 640, 480);
           setTimeout(loop, 1000 / 30); // drawing at 30fps
       }
   })();
});