2012-12-07 11 views
14

In realtà, ho una pagina HTML5 con la funzione JavaScript che mi consente di riprodurre un file video wmv. Ho bisogno di scattare un'istantanea quando il video è in riproduzione (con pause o senza) e salvato in qualsiasi formato immagine JPG o BMP. Qualsiasi aiuto apprezzerà. Grazie.Come eseguire un'istantanea del lettore video basato su HTML5 JavaScript?

<!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> 
+0

Vuoi un'istantanea di un momento specifico nel video player o vuoi uno screenshot a grandezza naturale? Se stai chiedendo uno screenshot del video player, potrebbe essere un po 'impegnativo, ma una schermata può essere consultata su http://stackoverflow.com/questions/4912092/using-html5-canvas-javascript-to-take- screenshot – aug

risposta

8

Si può prendere una copia del video corrente e riporlo in un elemento di tela utilizzando la funzione drawImage().

Ho un esempio completo di cui è possibile visualizzare il codice su Video/canvas screenshot che dovrebbe impostare la traccia corretta.

+0

Tuttavia, questo richiederà all'OP di sbarazzarsi del suo 'iframe', e usare invece un tag' video'. Non che ci sia qualcosa di sbagliato in questo, al contrario, basta indicarlo. – Cerbrus

36

Per copiare un frame video in un file immagine, è necessario caricare correttamente il video, copiare l'immagine su una tela ed esportarla in un file. Questo è totalmente possibile, ma ci sono alcuni punti in cui è possibile incontrare problemi, quindi facciamolo un passo alla volta.

1) Caricamento il video

Per catturare i pixel, è necessario caricare il video in un tag <video>, non un iframe o object o embed. E il file deve provenire da un server web, che è lo stesso della stessa pagina web (a meno che non si usi , che è complicato e potrebbe non funzionare nel browser. Questo è limitato dal browser per motivi di sicurezza. il codice carica il video dal file system locale, che non funziona.

È inoltre necessario caricare il formato file corretto. IE9 + può riprodurre WMV, ma è improbabile che venga eseguito qualsiasi altro browser. Se è possibile, caricare multiple sources, utilizzando 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) Successivamente, creare la tela e un contesto disegno. In realtà non è nemmeno necessario collegarlo al DOM, ma è necessario impostarlo sulla dimensione in cui si desidera salvare l'immagine risultante. Per questo esempio, supponiamo che tu abbia una dimensione fissa in mente, ma se vuoi, puoi impostarla su un multiplo della dimensione del video. Assicurati di eseguirlo all'interno di un evento "loadedmetadata" sul video, perché le dimensioni del video non saranno immediatamente disponibili.

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) Cattura l'immagine sulla tela e salvala in un file. Metti questo codice in un evento onclick su un pulsante o all'interno di un timer, tuttavia decidi quando catturare l'immagine. Usa il metodo drawImage. ([Questo articolo] fornisce una buona spiegazione, compresi i problemi di sicurezza. E 'lo stesso per il video che per l'immagine.)

//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) Esportazione del file di immagine

Il file jpg è stata salvata come a Data URI, che è una lunga stringa javascript che rappresenta una versione codificata del file binario completo. Sta a te decidere cosa farne. Puoi posizionarlo direttamente in un elemento img semplicemente impostandolo su src: myImage.src = dataUri;.

Se si desidera salvarlo in un file, è necessario caricarlo su un server. Ecco un good tutorial su come farlo.

Come al solito, tutto quanto sopra riportato è limitato ai browser che lo supportano.Se intendi aderire al video wmv, sei praticamente limitato a Internet Explorer 9+. 6-8 non supportano né il tag video né il canvas. Se è possibile aggiungere altri formati video, è possibile utilizzare Firefox (3.5+) e Chrome.

+1

Grazie. Ho appena realizzato uno script di segnalibri per scattare un'istantanea di Youtube Video: [youtube-screenshot] (https://github.com/ReeganExE/youtube-screenshot) –

+0

questo è fantastico, mi chiedo però come fare un'istantanea ad un certo punto nel video? Intendo per esempio il decimo secondo. – Tomasz

5
<html> 
<body> 

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

    function snap() { 
    context.fillRect(0,0,w,h); 
    context.drawImage(video,0,0,w,h); 
    } 
    </script> 

</body> 
</html> 
+0

grazie funziona molto bene –

+0

Funziona alla grande! Ma funziona solo se la sorgente video è ospitata sullo stesso server e non incrocia l'origine. Ma grazie per la soluzione! –