play - ¿Cómo tomar una instantánea del reproductor de video basado en JavaScript HTML5?
video html5 (3)
En realidad, tengo una página HTML5 con función de JavaScript que me permite reproducir un archivo de video wmv. Necesito tomar una instantánea cuando se reproduce el video (con pausa o sin ella) y guardar en cualquier formato de imagen JPG o BMP. Cualquier ayuda apreciará. Gracias.
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 video</title>
<script type="text/javascript">
function checkPlay() {
var myVideo = document.getElementById("myVid");
var ytStr = ''<iframe width="500" height="500" src="C:/XA0002.wmv" frameborder="0" allowfullscreen></iframe>'';
try {
var canPlay = document.getElementsByTagName(''video'')[0].canPlayType("video/wmv");
if ((canPlay == "no") || (canPlay == "")) {
myVideo.innerHTML = ytStr;
}
new MediaElement(v, { success: function (media) { media.play(); } });
} catch (err) {
myVideo.innerHTML = ytStr;
}
}
</script>
</head>
<body onload="checkPlay()">
<div id="myVid"/>
</body>
</html>
Puede tomar una copia del video actual y almacenarlo en un elemento canvas utilizando la función drawImage() .
Tengo un ejemplo completo cuyo código se puede ver en la captura de pantalla Video / canvas que debería establecerlo en el camino correcto.
<html>
<head>
</head>
<body>
//add video using video tag
<video controls>
<source src="C:/Users/ganesha/Desktop/Aararum.mp4" type="video/mp4"></source>
</video>
<canvas id="canvas" width="640" height="480"></canvas>
<button id="snap" onclick="snap()">Snap Photo</button>
//start the script ... within that declare variables as follows...
<script>
var video=document.querySelector(''video'');
var canvas=document.querySelector(''canvas'');
var context=canvas.getContext(''2d'');
var w,h,ratio;
//add loadedmetadata which will helps to identify video attributes......
video.addEventListener(''loadedmetadata'',function()
{
ratio=video.videoWidth/video.videoHeight;
w=video.videoWidth-100;
h=parseInt(w/ratio,10);
canvas.width=w;
canvas.height=h;
},false);
///define a function
function snap()
{
context.fillRect(0,0,w,h);
context.drawImage(video,0,0,w,h);
}
</script>
//stop the script..
Copiar un cuadro de video a un archivo de imagen implica cargar correctamente el video, copiar la imagen en un lienzo y exportarlo a un archivo. Esto es totalmente posible, pero hay algunos lugares donde puede tener problemas, así que vayamos paso por paso.
1) Cargando el video
Para capturar los píxeles, debe cargar el video en una etiqueta <video> , no en un iframe o un object o embed . Y el archivo debe provenir de un servidor web, que es el mismo en el que se encuentra la página web (a menos que use encabezados de origen cruzado , lo cual es complicado y puede no funcionar en su navegador. Esto está restringido por el navegador para seguridad razones: su código carga el video desde el sistema de archivos local, que no funcionará.
También necesita cargar el formato de archivo correcto. IE9 + puede jugar WMV, pero es poco probable que lo haga cualquier otro navegador. Si puede, cargue múltiples fuentes , usando webm, mp4 e idealmente ogg / theora.
var container = document.getElementById("myVid"),
video = document.createElement(''video''),
canCapture = true;
if (!video.canPlayType(''video/wmv'')) {
/* If you don''t have multiple sources, you can load up a Flash fallback here
(like jPlayer), but you won''t be able to capture frames */
canCapture = false;
return;
}
video.src = ''myvideo.wmv'';
container.appendChild(video);
video.play(); //or put this in a button click handler if you want your own controls
2) Luego, crea el lienzo y un contexto de dibujo. En realidad, no es necesario que lo adjunte al DOM, pero sí debe configurarlo en el tamaño en el que desea guardar la imagen resultante. Para este ejemplo, asumiremos que tiene una dimensión fija en mente, pero si lo desea, puede establecerla en un múltiplo del tamaño del video. Solo asegúrate de ejecutar eso dentro de un evento ''loadedmetadata'' en el video, porque las dimensiones del video no estarán disponibles de inmediato.
var canvas = document.createElement(''canvas'');
canvas.width = 640;
canvas.height = 480;
var ctx = canvas.getContext(''2d'');
// if you want to preview the captured image,
// attach the canvas to the DOM somewhere you can see it.
3) Capture la imagen en el lienzo y guárdela en un archivo. Ponga este código en un evento onclick en un botón o dentro de un temporizador, como quiera que usted decida cuando se capture la imagen. Usa el método drawImage. ([Este artículo] proporciona una buena explicación, incluidas las cuestiones de seguridad. Es lo mismo para el video que para una imagen).
//draw image to canvas. scale to target dimensions
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
//convert to desired file format
var dataURI = canvas.toDataURL(''image/jpeg''); // can also use ''image/png''
4) Exportar el archivo de imagen
El archivo jpg ahora se guarda como un URI de datos , que es una cadena larga de JavaScript que representa una versión codificada del archivo binario completo. Depende de ti qué hacer con eso. Puede colocarlo directamente en un elemento img simplemente configurándolo en src: myImage.src = dataUri; .
Si desea guardarlo en un archivo, casi necesita cargarlo en un servidor. Aquí hay un buen tutorial sobre cómo hacer eso.
Como de costumbre, todo lo anterior está restringido a los navegadores que lo soportan. Si va a apegarse al video wmv, está prácticamente limitado a Internet Explorer 9+. 6-8 no admiten ni la etiqueta de video ni el lienzo. Si puede agregar más formatos de video, puede usar Firefox (3.5+) y Chrome.