Mit Mobile Safari können Sie nur jeweils einen Audio- oder Videostream abspielen .
Mehrere gleichzeitige Audio- oder Videostreams
Derzeit sind alle Geräte mit iOS auf die Wiedergabe eines einzelnen Geräts beschränkt Audio- oder Video-Stream zu jeder Zeit. Mehr als eine Videoseite abspielen Seite, teilweise überlappend oder vollständig überlagert - ist derzeit nicht unterstützt auf iOS-Geräten.
Wenn Sie ein zweites Video abspielen, stoppt der erste. Ich muss erkennen, wenn dies auftritt, so dass ich in einem Play-Button, der neben dem Video erscheint, zurückblenden kann, und ich würde es auch gerne auf den ersten Frame zurücksetzen, weil es mitten in der Animation schrecklich aussieht.
Leider scheint das <video> -Element weder das "beendete" noch das "pausierte" Ereignis auszulösen, wenn das Video gezwungen ist, so zu stoppen.
Ich kann anscheinend keine anderen Ereignisse finden, die einem "erzwungenen Stopp" entsprechen. ( Siehe Apple-Ereignisse für HTMLMediaElement )
Muss ich das selbst machen und eine .playing -Klasse zu meinem Video hinzufügen und nachsehen, wenn ich ein zweites Video abspiele? Dies ist praktikabel, wenn ich jedes Video auf der Seite kontrolliere, aber sobald ich ein YouTube-Video dort hineinhalte, wird es viel komplizierter. Irgendwelche besseren Lösungen
Diese Lösung fühlt sich etwas hetzisch an, aber wenn der mobile Browser von Safari kein Ereignis auslöst, wenn das Video gestoppt wird, dann gibt es nicht viele Optionen -
Um festzustellen, ob ein Video gestoppt wurde, können wir zunächst sicherstellen, dass das Skript weiß, wann ein Video abgespielt wird, also:
%Vor% Damit wird beim Start des Videos eine Spielflagge gesetzt. Verwenden Sie auch das Ereignis ended , um es auf false zu setzen, falls es bis zum Ende gespielt oder manuell gestoppt wurde.
Der nächste Schritt besteht darin, die aktuelle Zeit der Videowiedergabe abzufragen, um zu sehen, ob sie sich ändert. Wenn keine Änderung erfolgt, wird angezeigt, dass das Video nicht abgespielt wird (und nicht vom beendeten Ereignis erfasst wird):
%Vor%Die Prüfrate sollte nicht höher als 30 fps sein. Dies liegt daran, dass der Zeitstempel nicht von dem geändert würde, der der Zeit von einem Frame zu einem anderen entsprechen würde. Um sicher zu sein, verwenden Sie die Hälfte der Rate wie im Beispiel für die höchste bekannte Bildrate (Videos sind sehr selten über 30 fps in den USA oder 25 fps in Europa). Wenn du weißt, dass die Videos mit einer niedrigeren Rate abgespielt werden, sollte die niedrigste Rate hier der Wert sein. Es kann auch gesenkt werden, um die Belastung im Allgemeinen zu reduzieren.
Um die Überprüfung zu stoppen, rufen Sie einfach:
%Vor%Es kann vorkommen, dass zwischen dem beendeten Ereignis und der Überprüfung eine Race-Bedingung auftritt (da beide asynchrones Verhalten erzeugen). Wenn es darauf ankommt, hängt davon ab, wie Sie mit den beiden Situationen umgehen.
Wie gesagt, es fühlt sich "hackisch" an, es ist von mir nicht getestet (nur theoretisiert, da ich momentan keine komplette Testumgebung dafür einrichten kann), aber hoffentlich wird es Ihnen helfen, diese Einschränkung der Safari zu umgehen mobiler Browser.
Wenn das Ereignis nicht ausgelöst wird, wenn ein anderes Video abgespielt wird, können wir beim Abspielen eines Videos einfach das ended -Ereignis aller anderen Videos auslösen, die gerade abgespielt wurden. Um die Wiedergabe von Videos zu verfolgen, könnten wir eine JavaScript-Eigenschaft verwenden, die an das video -Objekt angehängt ist. Etwas wie
Beispiel (Getestet auf dem iPad mini)
Die Kehrseite ist, dass dies auch für Desktop-Browser gilt, was nicht unbedingt wünschenswert ist. Bei Youtube-Videos, die auf derselben Seite eingebettet sind, können wir möglicherweise die Youtube-API verwenden. Die APIs verwenden postMessage, um miteinander zu kommunizieren. Daher habe ich den folgenden Code verwendet, um die Video-Tags zu stoppen, wenn ein Youtube-Video abgespielt wird.
%Vor%Tags und Links javascript mobile-safari html5-video