wake-up-neo.net

Dynamisches Verwenden des ersten Frames als Poster in HTML5-Videos?

Ich frage mich, ob es einen einfachen Weg gibt, diesen Effekt zu erzielen, ohne dass ein Backend-Code erforderlich ist, um einen Frame zu extrahieren, ihn als jpg zu speichern und irgendwo zu speichern.

Ein Effekt, bei dem das erste Bild des Videos nur als Poster angezeigt wird, wenn das Video geladen wird, das wäre so hilfreich (es würde nur funktionieren, wenn der Browser das Video offensichtlich wiedergeben kann, was sich ein wenig von der traditionellen Funktion von poster unterscheidet.) aber das ist kein Anliegen.

36
Damon

Es gibt ein Popcorn.js plugin namens Popcorn.capture , mit dem Sie Poster aus jedem Frame Ihres HTML5-Videos erstellen können. 

Es gibt eine Einschränkung, die der Browser auferlegt, die das Lesen von Pixeldaten von Ressourcen, die über Domänen hinweg angefordert wurden, unterbindet (Verwendung der Canvas-API zum Aufzeichnen des aktuellen Werts eines Frames). Das Quellvideo muss in derselben Domäne gehostet werden wie die Skript- und HTML-Seite, die es anfordert, damit dieser Ansatz funktioniert.

Der Code zum Erstellen eines Posters mit diesem Plugin ist recht einfach:

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

});
19
Rick

Hast du folgendes probiert?

zeit nur in Sekunden anhängen# t = {Sekunden}an Quell-URL:

<video width="300" height="150">
   <source src="testvideo.mp4#t=0.1" type="video/mp4" />
</video>

Ich habe einen Bruchteil der Sekunde ( 0,1 ) gewählt, um die Anzahl der Frames klein zu halten, weil ich den Verdacht habe, dass, wenn Sie 1 Sekunde setzen, die erste 1 Sekunde "vorgeladen" würde von Video (dh 24 Bilder oder mehr ....). Nur für den Fall ...

Funktioniert gut in Chrome und Firefox auf dem Desktop :)
Funktioniert nicht auf Android-Handys :(
Ich habe noch nicht auf iOS, iPhone, IE getestet?

19
Juergen Fink

Ich habe dies kürzlich für ein aktuelles Projekt getan, das auf Desktop und Mobile funktioniert. Der Trick bestand darin, es auf dem iPhone zum Laufen zu bringen.

Die Einstellung preload=metadata funktioniert auf Desktop- und Android-Geräten, nicht jedoch auf dem iPhone. 

Bei iPhones musste ich autoplay einstellen, damit das Posterbild beim ersten Laden automatisch angezeigt wird. iPhones verhindern, dass das Video automatisch abgespielt wird, das Posterbild wird jedoch als Ergebnis angezeigt.

Ich musste einen Check für das iPhone mit Hilfe der hier gefundenen Antwort von Pavan durchführen. iPhone Browser erkennen . Verwenden Sie dann je nach Gerät das richtige Video-Tag mit oder ohne autoplay

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">';
}
12
drumnbace

Sie können preload='auto' für das Videoelement festlegen, um das erste Bild des Videos automatisch zu laden.

6
James Westgate

Um es einfach zu machen, können Sie einfach preload="metadata" zu Ihrem video Tag hinzufügen und das zweite Bild des ersten Frames #t=0.5 zu Ihrer Videoquelle :

<video width="400" controls="controls" preload="metadata">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4#t=0.5" type="video/mp4">
</video>

Viel Glück!

3
coin hive

Lösung für # 2, # 3 usw. Frames. Zum Zurücksetzen des Standardrahmens benötigen wir den Einweg-Handler .one ().

<video width="300" height="150" id='my-video'>
   <source src="testvideo.mp4#t=2" type="video/mp4" />
</video>

$(function () {
     let videoJs = videojs('my-video');
     videoJs.one('play', function () {
          this.currentTime(0);
     });
});
0