Vielleicht haben Sie schon davon gehört, dass es Änderungen an der Autoplay-Funktion in Apple Safari und Google Chrome geben wird, und möchten mehr darüber erfahren. In diesem Beitrag gehe ich auf die Geschichte des Videoelements ein und erläutere, wie Autoplay die Videounterstützung in Browsern geprägt hat, welche Probleme aufgetreten sind und wie wir diese behoben haben, welche Empfehlungen Entwickler für ein optimales Autoplay-Verhalten haben und was in Zukunft von Autoplay im Web zu erwarten ist.
Wenn Sie nicht den ganzen Beitrag lesen wollen, hier die Quintessenz: Sie können weiterhin die autoplay Attribut und die Dinge sollten funktionieren, aber um die beste Unterstützung zu erhalten, sollten Sie in Erwägung ziehen, sich von der autoplay Attribut und verwenden Sie das play() Methode, um das von ihr zurückgegebene Play Promise zu nutzen.
HINTERGRUND
Im Februar 2007 veröffentlichte Opera ein Manifest, in dem sie sich für Video im Internet aussprachen. Zusammen mit diesem Manifest wurde eine technische Spezifikation für das veröffentlicht, was wir heute als <video> Element. Die Website WHATWG wurde die Spezifikation schnell übernommen, und andere Browser begannen in den folgenden Jahren mit der Implementierung der Unterstützung.
Apple war einer der ersten, der mit der Veröffentlichung von Safari 3.1 für iOS und Desktop im März 2008 die Unterstützung für das Videoelement freigab. Mozilla Firefox folgte im Juni 2009. Google Chrome im Oktober 2009. Der Internet Explorer war ein kleiner Nachzügler; er veröffentlichte IE9 und die Unterstützung für das Videoelement im März 2011.
Im März 2011 unterstützten Opera, IE, Firefox, Chrome und Safari für den Desktop die Autoplay-Funktion, mit Ausnahme von Apples iOS, das die Autoplay-Funktion einschränkte. Der Grund dafür waren Probleme mit dem Akku und der Benutzerfreundlichkeit, insbesondere weil Videos auf dem iPhone immer in den nativen Player gestartet werden, anstatt inline abgespielt zu werden.
Zwischen 2008 und 2016 hat sich die Akkulaufzeit erheblich verbessert, und Videos im Internet haben sich stark verbreitet. Angesichts des enormen Wachstums von Videos führte Apple in iOS 10 die Möglichkeit ein, Medien auf iPhones und iPads automatisch abzuspielen. Die Sache hatte jedoch einen Haken: Das Video musste stummgeschaltet sein oder durfte keine Tonspur haben. Außerdem muss das Video auf iPhones inline mit dem Bild abgespielt werden können. playsinline Attribut.
Nachdem Apple die stummgeschaltete Autoplay-Funktion eingeführt hatte, zog Google nach und führte sie in Chrome für Andriod 53 ein. In den vergangenen Monaten haben wir zusammen mit den SDK-Anbietern daran gearbeitet, Probleme mit dem neuen Autoplay-Verhalten zu lösen.
Im Juni 2017 kündigte Apple an, dass sie ab Safari 11 das gleiche Autoplay-Verhalten auf dem Desktop einführen würden, d. h., die automatische Wiedergabe ohne Stummschaltung würde abgelehnt werden. Nach dieser Ankündigung hielten wir es für das Beste, einen Schritt zurückzutreten und über die Probleme im Zusammenhang mit Autoplay nachzudenken, insbesondere bei Anzeigen, um zu sehen, ob die Probleme alle aus demselben Grund entstanden sind. Es war an der Zeit, Autoplay als eine grundlegende Änderung der Funktionsweise des Players anzugehen.
Im September 2017 kündigte Google an, dass sie ähnliche Änderungen in Google Chrome implementieren werden: Unified Autoplay. Im Gegensatz zu Apple geht Google noch einen Schritt weiter und erlaubt nicht nur die stummgeschaltete Autoplay-Funktion, sondern auch die Autoplay-Funktion, wenn der Nutzer mit der Seite interagiert hat oder wenn ein Media Engagement Index (MEI) überschritten wurde. Der MEI wird jeder Website zugewiesen und verfolgt, wie viel der Nutzer mit der Seite interagiert und ob er sich Videos ansieht oder Audio anhört. Auf diese Weise würden Websites, deren Hauptmerkmal Videos sind, wie YouTube und Netflix, einen hohen Media Engagement Index haben und müssten nicht auf eine Benutzergeste warten, um ungestört abzuspielen. Eine Website, die der Nutzer noch nie zuvor besucht hat, kann jedoch keine Videos mit Ton automatisch abspielen. Diese Funktion wird Anfang 2018 als Teil von Google Chrome 64 veröffentlicht.
DIE PROBLEME UND WAS WIR GETAN HABEN
Nach einem gründlichen Test stellte sich heraus, dass es nicht viele grundlegende Änderungen am Player gab, die vorgenommen werden mussten. Das Hauptproblem ergab sich daraus, wie Video.js sicherstellte, dass Autoplay dem von ihm erstellten Videoelement hinzugefügt wurde, und aus einer Inkonsistenz mit der Behandlung der HTML-Attribute und -Eigenschaften durch die Browser.
Das erste Problem war, dass Video.js während der Initialisierung autoplay als erstes Attribut des Videoelements vor anderen Attributen wie muted und playsinline enthalten waren. Während Chrome seine Autoplay-Prüfungen erneut durchführte, wenn diese Attribute gesetzt waren, taten Safari und iOS dies nicht. Also haben wir sichergestellt, dass die autoplay Eigenschaft wurde erst nach muted und playsinline wurden bereitgestellt.
Das zweite Problem war die Inkonsistenz der Browser in Bezug auf HTML-Attribute und -Eigenschaften. Sie könnten zum Beispiel einen automatisch abgespielten, stummgeschalteten Player mit HTML-Attributen wie diesem erstellen:
<video autoplay muted playsinline>Dies funktionierte, aber wenn wir versuchten, es programmatisch wie im Folgenden zu tun, war es nicht möglich:
video.muted = true;
video.autoplay = true;Es hat nicht funktioniert, weil das Video auf einigen iOS-Geräten nicht wirklich stummgeschaltet war. Stattdessen mussten wir sicherstellen, dass das Attribut und die Eigenschaft festgelegt werden; verschiedene Gerätequerschnitte würden nicht nur mit einem Aufruf von setAttribute. Dies führt uns zu folgendem Ergebnis:
video.muted = true;
// muted is a boolean attribute, so, any value turns it on, using the name of the attribute is an often used convention
video.setAttribute(‘muted’, ‘muted’);
video.autoplay = true;
video.setAttribute(‘autoplay’, ‘autoplay’);Die muted Problem hat sich weiter verschlimmert. Bei der Verwendung von Video.js zur Abfrage, ob das Video stummgeschaltet war, erhielten wir manchmal die falsche Antwort. Video.js verwendete den Eigenschaftswert, um zu prüfen, ob etwas eingestellt war, aber in einigen Fällen, wenn die Funktion über das Attribut eingestellt war, wurde die Eigenschaft nicht so eingestellt, dass sie diesen Wert widerspiegelt. Bei einem Einbettungscode wie dem folgenden ist das der Fall:
<video muted>Wir würden false als wir den Spieler nach dem Stummschaltwert gefragt haben:
player.muted();
// -> falseWir haben also intern dafür gesorgt, dass jede Einstellung sowohl das Attribut als auch die Eigenschaft festlegt und jeder Getter beide berücksichtigt.
DER NEUE ZUSTAND VON AUTOPLAY
Jetzt, wo diese Änderungen verfügbar sind, funktioniert Autoplay großartig, oder? Nicht so schnell.... Aufgrund der Art und Weise, wie die automatische Wiedergabe abgelehnt wird, wenn die richtigen Bedingungen nicht erfüllt sind (d. h. muted auf Safari 11, iOS und Chrome für Android sowie das Hinzufügen von playsinline auf iPhones) ist es schwer zu erkennen, ob Autoplay abgelehnt wurde oder ob der Nutzer nur auf Play gedrückt hat und sofort danach eine Pause eingelegt hat. Dies ist etwas, das Anzeigen-SDKs berücksichtigen müssen und das wir als Bekannte Probleme unten. Auf mobilen Geräten haben die meisten Anzeigen-SDKs bereits ein Update für eine ordnungsgemäße Unterstützung durchgeführt, aber zum Zeitpunkt der Erstellung dieses Artikels gibt es noch keine offizielle Unterstützung für Safari 11 durch die Anzeigen-SDKs.
DAS SPIELVERSPRECHEN
In den letzten Jahren haben sich die Browser dahingehend weiterentwickelt, dass sie ein Versprechen (Promise), eine Darstellung eines asynchronen Prozesses und dessen Rückgabewert, von der Abspielfunktion zurückgeben. Anhand des Versprechens können Sie feststellen, ob eine Wiedergabe erfolgreich war. Wird das Versprechen aufgelöst, war die Wiedergabe erfolgreich; wird das Versprechen zurückgewiesen, ist die Wiedergabe fehlgeschlagen. Bisher waren zwei der Hauptgründe für die Ablehnung des Versprechens, dass das Video nicht abgespielt werden konnte und dass der Benutzer (oder ein anderes Skript) das Video kurz nach der Wiedergabe angehalten hat, bevor es erfolgreich abgespielt werden konnte.
Jetzt gibt es einen neuen Ablehnungsgrund für die Wiedergabezusage. Wenn Sie auf einer Plattform sind, die die automatische Wiedergabe ablehnt, wenn das Video nicht stummgeschaltet oder stummgeschaltet ist (oder auf dem iPhone inline abgespielt werden darf), wird die Zusage abgelehnt.
Die Abspielzusage ist auch die einzige Möglichkeit (derzeit) zu erfahren, ob die automatische Wiedergabe abgelehnt wurde, weshalb die Browserhersteller empfehlen, die play() Methode über die autoplay Attribut.
EMPFEHLUNG
Mit den Änderungen, die wir vorgenommen haben, wird die autoplay funktioniert und wird auch in Zukunft so gut wie möglich funktionieren. Der Wechsel zur Verwendung des play() Methode wird empfohlen.
Erstens empfehlen die Browser-Hersteller selbst die Verwendung dieser Methode gegenüber der autoplay und es ist im Allgemeinen eine gute Idee, ihren Rat zu befolgen.
Zweitens, die Verwendung der play() Methode können Sie als Entwickler des Players feststellen, ob die automatische Wiedergabe erfolgreich war, wenn Sie das Versprechen anhören:
player.play().then(function() {
// play succeeded!
})
.catch(function(error) {
// play failed
console.error(error.message);
});Wenn die automatische Wiedergabe abgelehnt wird, können Sie eine Nachricht einfügen oder eine Alternative anbieten.
Drittens, wenn die play() Methode auf dem Player verwendet wird, kann der Player das erstellte Versprechen speichern und intern verwenden, um eine noch bessere Behandlung von Randfällen zu ermöglichen, die durch abgelehnte automatische Wiedergabe entstehen.
Zusammenfassend lässt sich sagen, dass Sie weiterhin die autoplay Attribut und die Dinge sollten funktionieren, aber um die beste Unterstützung zu erhalten, sollten Sie in Erwägung ziehen, sich von der autoplay Attribut und verwenden Sie das play() Methode, um das von ihr zurückgegebene Play Promise zu nutzen.
DIE ZUKUNFT VON AUTOPLAY
Es scheint, dass die Zukunft von Autoplay in gewisser Hinsicht auch der Tod von Autoplay ist. Apple verfolgt eine ziemlich strenge Politik in Bezug auf Autoplay: Es wird nur stummgeschaltetes Autoplay zugelassen und eine Benutzergeste für die Wiedergabe ohne Stummschaltung verlangt. Das hat den Vorteil, dass Desktop und Mobile einheitlich sind. Google verfolgt eine etwas entspanntere Politik: Nur stummgeschaltetes Autoplay ist erlaubt, es sei denn, der Nutzer hat in dieser Sitzung mit der Website interagiert oder es handelt sich um eine Website, die der Nutzer häufig zum Ansehen von Videos besucht. Googles Unified Autoplay ist jedoch wahrscheinlich das, was die Zukunft von Autoplay sein sollte. Es schränkt die Autoplay-Funktion ein, um den Nutzern zu helfen, und sorgt gleichzeitig dafür, dass Websites größtenteils wie bisher funktionieren können. Letztendlich hoffe ich, dass alle Browser zusammenarbeiten, um konsistente Autoplay-Beschränkungen beizubehalten und die Entwickler davon zu befreien, sich auf browserspezifisches Autoplay-Verhalten einzustellen. Hoffentlich ist die Zukunft von Autoplay eine einheitliche.
BEKANNTE PROBLEME
- Stumme Anzeigen (Anzeigen ohne Audiospur) werden auf Plattformen, die die automatische Wiedergabe ohne Stummschaltung ablehnen, automatisch wiedergegeben. Nach Beendigung der Anzeige wird der Inhalt jedoch nicht fortgesetzt, da der Player nicht stummgeschaltet ist und keine Benutzeraktion durchgeführt wurde. Dies gilt für IMA und FreeWheel.
- Wenn der Player stummgeschaltet ist, die automatische Wiedergabe beginnt und der Benutzer die Stummschaltung der Anzeige aufhebt, wird der Inhalt nicht fortgesetzt, da keine Benutzeraktion durchgeführt wurde und der Player nicht mehr stummgeschaltet ist.
- Wenn die Anzeige Audio enthält, aber die Plattform die automatische Wiedergabe ablehnt (z. B. bei Safari 11), geht FreeWheel davon aus, dass es ein Problem mit der Anzeige gab, wenn die automatische Wiedergabe abgelehnt wird. Es wartet das Timeout-Intervall für die Anzeige ab und schaltet dann zurück zum Inhalt, der nicht automatisch abgespielt wird, da der Player nicht stummgeschaltet ist und keine Benutzeraktion durchgeführt wurde.
- Wenn Autoplay abgelehnt wird, aber
playsinlinefestgelegt wurde, blendet der Brightcove-Player die große Wiedergabetaste aus und zeigt die Steuerleiste an. Das Posterbild sollte jedoch in den meisten Fällen weiterhin sichtbar sein. Dies liegt daran, wie die Ablehnung der automatischen Wiedergabe bei Verwendung derautoplayAttribut.
