Estou utilizando uma função que captura um frame do vídeo para posteriormente defini-la como thumbnail.
function thumbnail()
{
var canvas = document.getElementById('thumb');
$('#thumb').css('width',$('#video').css('width'));
$('#thumb').css('height',$('#video').css('height'));
var video = document.getElementById('video');
canvas.getContext('2d').drawImage(video, 0, 0, video.videoWidth, video.videoHeight, 0, 0, canvas.width, canvas.height);
}
Este frame será definido pelo usuário, então toda vez que ele clicar em um determinado botão, essa função será chamada.
A função funciona corretamente, mas acontece que quando o determinado frame é replicado para o canvas, a imagem perde a qualidade e não fica como é no vídeo. Eis a imagem de exemplo:
Na esquerda é o vídeo sendo reproduzido, enquanto na direita é a thumb gerada depois do clique no botão. (A qualidade do vídeo não é das melhores, mas reparem na legenda que está bem definida e olhem como ela fica na imagem gerada pelo canvas).
Como faço para que a qualidade da imagem gerada seja fiel ao frame do meu vídeo?