Jak zrobić migawkę odtwarzacza wideo opartego na języku HTML5?

Właściwie mam stronę HTML5 z funkcją JavaScript, która pozwala mi odtwarzać plik wideo wmv. Potrzebuję zrobić migawkę podczas odtwarzania wideo (z pauzą lub bez) i zapisać w dowolnym formacie obrazu JPG lub BMP, niezależnie. Każda pomoc doceni. Dziękuję.Jak zrobić migawkę odtwarzacza wideo opartego na języku HTML5?

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

Źródło

2012-12-07 Ahmed MEZRI

Czy chcesz uzyskać migawkę z określonego momentu w odtwarzaczu wideo, czy chcesz zrzutu ekranu w pełnym rozmiarze? Jeśli pytasz o zrzut ekranu odtwarzacza wideo, może to być trochę trudne, ale zrzuty ekranu można obejrzeć na http://stackoverflow.com/questions/4912092/using-html5-canvas-javascript-to-take- Zrzuty ekranu – aug

Można wziąć kopię bieżącego wideo i przechowywać go w elemencie canvas za pomocą funkcji drawImage().

Mam pełny przykład kodu, który można obejrzeć pod numerem Video/canvas screenshot, który powinien ustawić Cię na właściwej ścieżce.

Źródło

2012-12-07 10:06:38

Jednak będzie to wymagało OP, aby pozbyć się jego 'iframe' i zamiast tego użyć znacznika' video'. Nie chodzi o to, że coś jest nie w porządku, wręcz przeciwnie, po prostu to wskazuję. – Cerbrus

Aby skopiować klatkę wideo do pliku obrazu, należy prawidłowo załadować wideo, skopiować obraz na płótno i wyeksportować do pliku. Jest to całkowicie możliwe, ale jest kilka miejsc, w których możesz napotkać kłopoty, więc zróbmy to krok po kroku.

1) Ładowanie wideo

Aby uchwycić pikseli, trzeba załadować film na <video> tagu, a nie iframe lub object lub embed. Plik musi pochodzić z serwera WWW, który jest tą samą stroną, na której się znajduje (chyba że korzystasz z cross-origin headers, co jest skomplikowane i może nie działać w Twojej przeglądarce, co jest ograniczone przez przeglądarkę ze względów bezpieczeństwa. kod ładuje wideo z lokalnego systemu plików, który nie zadziała

Należy również załadować odpowiedni format pliku IE9 + może odtwarzać WMV, ale jest mało prawdopodobne, że jakakolwiek inna przeglądarka będzie. multiple sources korzystając WebM, MP4, a najlepiej 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) Następnie należy utworzyć obszar roboczy i kontekst rysowania. W rzeczywistości nie musisz nawet dołączać go do DOM, ale musisz ustawić go na rozmiar, w którym chcesz zapisać wynikowy obraz. W tym przykładzie zakładamy, że masz na myśli określony wymiar, ale jeśli chcesz, możesz ustawić go na wielokrotność rozmiaru wideo. Po prostu upewnij się, że uruchomisz to w zdarzeniu "loadedmetadata" w filmie, ponieważ wymiary wideo nie będą dostępne od razu.

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) Zapisz obraz na płótnie i zapisz go w pliku. Umieść ten kod w zdarzeniu onclick na przycisku lub wewnątrz licznika czasu - jednak chcesz zdecydować, kiedy obraz zostanie przechwycony. Użyj metody drawImage. ([Artykuł] zapewnia dobre wyjaśnienie, w tym kwestie bezpieczeństwa. To samo na filmie jak na obrazie.)

//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) Eksportowanie pliku obrazu

plik jpg zostanie zapisany jako a Data URI, który jest długim łańcuchem javascript reprezentującym zakodowaną wersję pełnego pliku binarnego. Od Ciebie zależy, co z tym zrobić. Możesz umieścić go bezpośrednio w elemencie img, ustawiając go po prostu na src: myImage.src = dataUri;.

Jeśli chcesz zapisać plik, musisz go przesłać na serwer. Oto good tutorial, jak to zrobić.

Jak wszystkie powyższe ograniczenia są ograniczone do przeglądarek, które je obsługują.Jeśli zamierzasz trzymać się wideo wmv, jesteś praktycznie ograniczony do Internet Explorera 9+. 6-8 nie obsługują ani tagu wideo, ani płótna. Jeśli możesz dodać więcej formatów wideo, możesz użyć przeglądarki Firefox (3.5+) i Chrome.

Źródło

2012-12-07 14:46:33 brianchirls

Dzięki. Właśnie zrobiłem skrypt zakładki do zrobienia migawki z Youtube Video: [youtube-screenshot] (https://github.com/ReeganExE/youtube-screenshot) –

to jest niesamowite, zastanawiam się jednak, jak zrobić migawkę w pewnym momencie w filmie? Mam na myśli np. 10 sekundę. – Tomasz

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

Źródło

2013-04-09 07:10:59

dzięki to działa bardzo dobrze –

Działa świetnie! Ale działa tylko wtedy, gdy źródło wideo jest hostowane na tym samym serwerze, a nie krzyżuje się. Ale dziękuję za rozwiązanie! –

Jak zrobić migawkę odtwarzacza wideo opartego na języku HTML5?

Odpowiedz

Powiązane problemy