Dynamicznie używając pierwszej klatki jako plakatu w wideo HTML5?

Question

Zastanawiam się, czy istnieje jakiś prosty sposób na uzyskanie tego efektu, bez potrzeby użycia kodu backendu do wyodrębnienia ramki, zapisz ją jako plik jpg i bazę danych gdzieś.

Efekt, w którym pierwsza klatka filmu po prostu wyświetla się jako plakat po załadowaniu wideo, byłaby bardzo pomocna (działałaby tylko wtedy, gdyby przeglądarka mogła oczywiście odtwarzać wideo, co może być nieco inne niż poster tradycyjnie działa, ale to nie jest problemem.

Answer 1

jest Popcorn.js plugin o nazwie Popcorn.capture który pozwoli Ci tworzyć plakaty z dowolnej klatki wideo HTML5.

jest to ograniczenie, które narzuca przeglądarka, która zabrania odczytywania danych pikseli żądanych zasobów w różnych domenach (przy użyciu interfejsu API obszaru roboczego do zapisywania bieżącej wartości wartości a rama). Źródło wideo musi być hostowane w tej samej domenie, co skrypt i strona html, która żąda jej, aby to podejście działało.

Kod stworzyć plakat przy użyciu tej wtyczki jest bardzo prosta:

// This block of code must be run _after_ the DOM is ready 
// This will capture the frame at the 10th second and create a poster 
var video = Popcorn("#video-id"); 

// Once the video has loaded into memory, we can capture the poster 
video.listen("canplayall", function() { 

    this.currentTime(10).capture(); 

}); 

Answer 2

Można ustawić preload='auto' na elemencie wideo załadować pierwszą klatkę wideo automatycznie.

Answer 3

Ostatnio zrobiłem to dla niedawnego projektu, który działa na komputerach i urządzeniach mobilnych. Sztuczka polegała na tym, żeby działało na iPhone'ie.

Ustawienie preload=metadata działa na komputerach stacjonarnych i urządzeniach z systemem Android, ale nie na telefonie iPhone.

W przypadku iPhone'ów musiałem ustawić go na autoplay, aby obraz plakatu pojawiał się automatycznie przy pierwszym załadowaniu. iPhone zapobiega automatycznemu odtwarzaniu wideo, ale w rezultacie pojawia się obraz plakatu.

Musiałem zrobić czek na iPhone'a za pomocą odpowiedzi Pavana znalezionej tutaj. Detect iPhone Browser. Następnie użyj odpowiedniego tagu wideo z lub bez autoplay w zależności od urządzenia.

var agent = navigator.userAgent; 
var isIphone = ((agent.indexOf('iPhone') != -1) || (agent.indexOf('iPod') != -1)) ; 

$videoTag = ""; 
if(isIphone()) { 
    $videoTag = '<video controls autoplay preload="metadata">'; 
} else { 
    $videoTag = '<video controls preload="metadata">'; 
}