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
}
})();
});