HTML5-Video beim Laden an einer bestimmten Position starten?

86

Ich benötige HTML5-Video, um an einem bestimmten Punkt zu beginnen. Nehmen wir zum Zeitpunkt 50 Sekunden an.

Ich habe es versucht, aber es funktioniert nicht wie erwartet. Gibt es etwas, was ich falsch mache?

Hier ist der Code: 

   <video id="vid1" width="640" height="360">
       <source src="file.webm" type="video/webm" /> 
       Your browser does not support the video tag.
   </video>
   <script>
       document.getElementById('vid1').currentTime = 50;
   </script>

Wenn die Seite geladen wird, beginnt sie gerade von vorne zu spielen. Wenn ich dies jedoch während der Wiedergabe wie nach einiger Zeit aufrufe, funktioniert es einwandfrei. Fehlt mir etwas?

javascript html5-video Johnydep
quelle
2
Welche Browser? Haben Sie versucht, den Anruf um einige Millisekunden zu verzögern? Vielleicht dauert es etwas länger, bis das Videoelement vollständig geladen ist
Ortiga

Antworten:

126

Sie müssen warten, bis der Browser die Dauer des Videos kennt, bevor Sie nach einer bestimmten Zeit suchen können. Ich denke, Sie möchten auf das Ereignis 'loadmetadata' ungefähr so ​​warten:

document.getElementById('vid1').addEventListener('loadedmetadata', function() {
  this.currentTime = 50;
}, false);
Richard M.
quelle
2
Dies funktioniert in Safari nicht. Ich habe auch das Loadeddata-Ereignis ausprobiert. Irgendwelche Ideen?
Simon Perepelitsa
Keine Ursache. Dies ist ein Problem mit dem WEBM-Format. MP4 funktioniert gut.
Simon Perepelitsa
Verwenden Sie das Ereignis 'Durationchange' und rufen Sie immer pause auf, bevor Sie Änderungen an der Videowiedergabe vornehmen
Jason White
51

Sie können direkt mit dem URI für Medienfragmente verknüpfen. Ändern Sie einfach den Dateinamen in file.webm # t = 50

Hier ist ein Beispiel

Das ist ziemlich cool, man kann alle möglichen Dinge tun. Ich kenne den aktuellen Stand der Browserunterstützung jedoch nicht.

rlovtang
quelle
Browser-Unterstützung ist gut. Ich denke, dass alle HTML5-unterstützenden Browser zumindest die grundlegenden zeitlichen Medienfragmente unterstützen.
Jim S.
@ Michaelhanon, es wäre ziemlich einfach, eine Polyfill für IE zu schreiben, um dies zu erreichen. Browser erkennen, wenn nicht unterstützt, URL auflösen, Abfrageparameter suchen, Javascript verwenden, um die Zeit des Videos zu ändern ... Ich könnte es tun, wenn ich eine Chance
bekomme
Gibt es ein Fragment zum Einstellen der END-Zeit?
DGoiko
47

OHNE JAVASCRIPT ZU VERWENDEN

Fügen Sie einfach #t=[(start_time), (end_time)]am Ende Ihrer Medien-URL hinzu. Der einzige Rückschlag (wenn Sie es so sehen möchten) ist, dass Sie wissen müssen, wie lange Ihr Video dauert, um die Endzeit anzuzeigen. Beispiel: 

<video>
    <source src="splash.mp4#t=10,20" type="video/mp4">
</video>

Hinweise: Wird im IE nicht unterstützt

Anita
quelle
Die zweite Ziffer scheint nicht zu enden, wie viel des Videos zuerst geladen wurde ... Die erste Ziffer hat funktioniert. Irgendwelche Gedanken?
Martian2049
das funktioniert nicht wirklich gut. Der Browser lädt immer noch so viel vor, wie er möchte. Vielleicht beginnen und enden Sie einfach dort, wo Sie sich entschieden haben, aber das
Vorladen
28

Passen Sie die Start- und Endzeit des Videos an, wenn Sie das Video-Tag in HTML5 verwenden.

http://www.yoursite.com/yourfolder/yourfile.mp4#t=5,15

Wobei links vom Komma die Startzeit in Sekunden ist, rechts vom Komma die Endzeit in Sekunden. Lassen Sie das Komma und die Endzeit fallen, um nur die Startzeit zu beeinflussen.

BobK
quelle
Die zweite Ziffer scheint nicht zu enden, wie viel des Videos zuerst geladen wurde ... Die erste Ziffer hat funktioniert. Irgendwelche Gedanken?
Martian2049
Wenn Sie mit Browsern arbeiten, ist es immer besser, die W3C-Spezifikation und caniuse.com zu überprüfen, um festzustellen, wie weit eine Funktion unterstützt wird. (Die besten StackOverflow-Antworten verweisen auf die Spezifikationen.) In diesem Fall heißen sie "Medienfragmente", und die Spezifikation ist hier. w3.org/TR/media-frags
Michael Scheper
3

Auf Safari Mac für eine HLS-Quelle musste ich das geladene Datenereignis anstelle des Metadatenereignisses verwenden.

Robert Reinhardt
quelle
Ich denke, die geladenen Metadaten sollten das richtige Ereignis sein, aber auch ich wurde suchbar. Länge 0 (nur in Safari unter OSX), es sei denn, ich habe auf dataloaded gewartet. Danke
Statuswoe
1
Warum wurde das abgelehnt? Es hängt wahrscheinlich nicht direkt mit dem vom OP bereitgestellten Beispiel zusammen, ist jedoch sachlich korrekt und für das allgemeine Thema der Frage relevant.
JayPea
3

Die Verwendung eines #t=10,20Fragments hat bei mir funktioniert.

Kamila
quelle
1
Dies ist nur eine Wiederholung von zwei anderen Antworten mit höheren Stimmen, die etwa 5 Jahre zuvor geschrieben wurden.
Michael Scheper