wechatVideoExample
1.0.0
Quellcode zum Abspielen von Videos auf WeChat testen: Da WeChat den X5-Browser verwendet, treten beim Abspielen von Videos mit dem Video-Tag verschiedene seltsame Probleme auf. Bei diesem Quellcode handelt es sich um einen vorläufigen Quellcode, der im Zuge der Lösung dieses Problems erstellt wurde. Es umfasst verschiedene Testfälle: Verwendung von Canvas zum Abspielen von Videos, Verwendung von Bildern zum Abspielen von Videos, Verwendung von x5-Tags usw. Diese verfügbare Quellcode-Bibliothek kann beibehalten werden und interessierte Studierende können sie selbst herunterladen.
###Erstellen Sie nach dem Herunterladen der Einführung ein neues Verzeichnis auf dem Host und kopieren Sie den gesamten Quellcode in dieses Verzeichnis. Verwenden Sie den WeChat-Browser, um zum Testen auf die darin enthaltene HTML-Seite zuzugreifen.
Autor chenjsh36 Ant Financial Data Experience Technology Team
Mit dem Aufkommen des Verkehrszeitalters und der Verbesserung der Hardware-Technologie hoffen immer mehr Websites, ihre eigenen Videos auf PCs oder mobilen Endgeräten abzuspielen. Die schrittweise Verbesserung der Kompatibilität von <video> erhöht die Bereitschaft der Entwickler, Videos zu implementieren Wiedergabeszenarien.
In diesem Artikel werden hauptsächlich die häufigsten Szenarien für die Videowiedergabe und die in jedem Szenario auftretenden Fallstricke aufgeführt. Wir hoffen, dass er Entwicklern dabei helfen kann, schneller geeignete technische Lösungen auszuwählen und die Fallstricke bei der Nachfrageentwicklung zu verringern.
autoPlay Boolean-Attribut; wenn es angegeben wird, wird das Video automatisch sofort abgespielt und hört nicht auf, auf das Laden der Daten zu warten.
Die automatische Wiedergabe von Videos kann das Video automatisch abspielen, wenn die Seite geöffnet ist und die Ressourcen ausreichend geladen sind, wodurch die Interaktion mit einem Benutzerklick reduziert wird. Sie kann auch auf dynamische Hintergründe und H5-Imitationsvideoanruffunktionen angewendet werden. Aus verschiedenen Gründen unterliegt die automatische Wiedergabe jedoch unterschiedlich starken Einschränkungen sowohl auf dem PC als auch auf mobilen Endgeräten.
In den frühen Tagen war zum Abspielen ein Benutzergesten-Video-Tag erforderlich. Ab Version 10 wurden die Videoregeln geändert und Apple hat die Inline- und Autoplay-Strategie wie folgt gelockert (gilt nur für den Safari-Browser):
<video> -Elemente können ohne Benutzergeste autoplay werden, wenn ihr Quellmedium keine Audiospuren enthält (Videoelemente ohne Audioquellen ermöglichen die automatische Wiedergabe).<video muted> -Elemente können auch ohne Benutzergeste automatisch abgespielt werden.<video> -Element ohne eine Benutzergeste eine Audiospur erhält oder die Stummschaltung aufgehoben wird, wird die Wiedergabe angehalten.<video autoplay> -Elemente werden nur abgespielt, wenn sie auf dem Bildschirm sichtbar sind, etwa wenn sie in das Ansichtsfenster gescrollt, über CSS sichtbar gemacht und in das DOM eingefügt werden (Videoelemente werden nur abgespielt, wenn sie auf dem Bildschirm sichtbar sind).<video autoplay> -Elemente werden angehalten, wenn sie nicht mehr sichtbar sind, beispielsweise weil sie aus dem Ansichtsfenster gescrollt werden. __Early__ erforderte auch Benutzergesten zum Abspielen; Androids Chrome 53 hat die Autoplay-Richtlinie gelockert. Die Richtlinie unterscheidet sich von iOSs Safari. Es ist notwendig, Autoplay und Stummschaltung (ob der Ton stummgeschaltet ist) für das Video gleichzeitig einzustellen __Androids Firefox und UC Browser__ unterstützen die automatische Wiedergabe unter allen Umständen; die Situation mit anderen Android-Browsern ist derzeit unklar;
Anfangs wurde Autoplay unterstützt, doch in letzter Zeit haben Safari und Chrome ihre Autoplay-Strategien sukzessive geändert ...
__Safari 10 und höher__ Videos und Audio mit Audio sind standardmäßig für die automatische Wiedergabe deaktiviert . Weitere Informationen finden Sie in diesem Artikel.
Autoplay unter Chrome (alte Version):
Safari (Beitrag 10) wird nicht automatisch abgespielt:
Videos mit stummgeschaltetem Ton können weiterhin automatisch abgespielt werden, basierend auf dem __Media Participation Index__. Was ist also der Media Participation Index? Die offizielle Erklärung und die zugehörigen Abmessungen finden Sie hier:
MEI ist ein Index, der die Medienbeteiligung des Benutzers auf der aktuellen Website bewertet. Er hängt von folgenden Dimensionen ab:
- Der Benutzer blieb länger als 7 Sekunden auf dem Medium
- Der Ton muss angezeigt und darf nicht stummgeschaltet sein
- Mit Video interagiert
- Die Größe des Mediums darf nicht kleiner als 200 x 140 sein.
Nach der Lektüre sind die Gedanken des Entwicklers wie folgt:
Glücklicherweise bieten sowohl Safari als auch Chrome zwar eine Einschränkung der automatischen Wiedergabe, bieten aber einen Mechanismus, um zu erkennen, ob das Video automatisch abgespielt werden kann, sodass Entwickler Alternativen haben, wenn sie feststellen, dass die automatische Wiedergabe nicht möglich ist:
var promise = document.querySelector('video').play();
if (promise !== undefined) {
promise.catch(error => {
// Auto-play was prevented
// Show a UI element to let the user manually start playback
}).then(() => {
// Auto-play started
});
}
weil es störend und datenhungrig sein kann und vielen Benutzern nicht gefällt . (Weil es störend und datenhungrig sein kann und vielen Benutzern nicht gefällt.)
Ich habe festgestellt, dass H5, das automatisch abgespielt wird, oft auf WeChat zu sehen ist. Das vom Autor geschriebene Beispiel für die Videowiedergabe mit Autoplay und PlaysInline kann jedoch immer noch nicht automatisch auf WeChat abgespielt werden, wohl aber auf DingTalk.
| System-Browser | mit Ton | ohne Ton |
|---|---|---|
| IOS DingTalk | Unterstützung | Unterstützung |
| IOS-Safari | verbieten | Autoplay |
| IOS WeChat | verbieten | verbieten |
Durch Abfragen der Informationen basiert die IOS-WebAPP-Entwicklung auf dem von IOS bereitgestellten Browser-Kernel . Daher kann die Leistung der automatischen Wiedergabe in der Webansicht von DingTalk geändert werden, während WeChat die automatische Wiedergabe verbietet, aber eine integrierte Funktion bietet Ereignisse zur Unterstützung der automatischen Wiedergabe:
Automatische Wiedergabe über das WeixinJSBridgeReady- Ereignis unter WeChat:
document . addEventListener (
'WeixinJSBridgeReady' ,
function ( ) {
video . play ( ) ;
} ,
false
) ; Wenn der Benutzer in mobilen Browsern auf die Wiedergabe klickt oder die Wiedergabe über die API video.play() auslöst, wird die Wiedergabe des Videos im Vollbildmodus erzwungen bessere Benutzererfahrung, aber manchmal möchten Entwickler steuern können, ob sie in den Vollbildmodus wechseln, um andere Anforderungen zu erfüllen.
Wenn Sie eine Nicht-Vollbildwiedergabe erreichen möchten, fügen Sie einfach das Attribut „playsinline“ zum Video-Tag hinzu. Dieses Attribut ist in mobilen Browsern, die auf dem Webkit-Kernel basieren, grundsätzlich kein Problem. Wenn es nicht funktioniert, fügen Sie einfach „webkit-playsinline“ hinzu:
< video
src = {videoUrl}
webkit-playsinline =" true "
playsinline =" true "
/>Wie geht man also mit Browsern mit anderen Kerneln um? Zu diesem Zeitpunkt müssen Sie verstehen, welche Browser derzeit auf dem Markt sind.
Zunächst müssen Sie die aktuellen vier Browserkerne der Welt kennen:
In:
Gängige inländische PC-Browser wie UC Browser, QQ Browser, Baidu Mobile Browser, 360 Secure Browser, Google Chrome, Sogou Mobile Browser, Cheetah Browser sowie mobile UC, QQ, Baidu und andere mobile Browser verfügen im Wesentlichen über auf Webkit basierende Kernel. Wir können davon ausgehen, dass mobile Benutzer auf dem Markt grundsätzlich Webkit-Kernel oder Browser verwenden, die auf dem Webkit-Kernel basieren, sodass die Kompatibilität von PlayInline sehr gut ist!
Das Videoelement bietet Entwicklern mehrere Verhaltensereignisse zur Steuerung der Videowiedergabe, darunter onended , __ontimeupdate, onplay, onplaying usw. __Einige Ereignisse verhalten sich auf verschiedenen Browsern und verschiedenen Geräten nicht konsistent.
Beispiel: Die Überwachung von „ canplay “ unter iOS (ob genügend Daten für eine reibungslose Wiedergabe gepuffert wurden) wird beim Laden nicht ausgelöst, auch wenn __preload="auto" __ nutzlos ist, aber im Chrome-Debugger auf dem PC Next wird dies der Fall sein wird während der Ladephase ausgelöst. ios muss gespielt werden, bevor es ausgelöst wird.
Laden abgeschlossen:
Zum Abspielen klicken:
Laden abgeschlossen:
Klicken Sie zum Spielen
Laden abgeschlossen:
Zum Abspielen klicken:
Einige Ereignisse weisen in verschiedenen Systemen, Geräten und Browsern inkonsistente Anzeigeeigenschaften auf. Seien Sie daher bei der Verwendung vorsichtig.
Durch das Hinzufügen von Steuerelementen zu diesem Attribut stellt Gecko Benutzersteuerelemente bereit, mit denen Benutzer die Videowiedergabe steuern können, einschließlich Lautstärke, Frame-Crossing und Wiedergabe anhalten/fortsetzen.
Das Steuerattribut gibt an, dass der Browser Wiedergabesteuerelemente für das Video bereitstellen soll. Andernfalls werden die Wiedergabesteuerelemente ausgeblendet, sodass Entwickler ihre eigenen Wiedergabesteuerelemente anpassen können. Das Ausblenden von Wiedergabesteuerelementen ist auf PC- und IOS-Mobilterminals gut kompatibel . Das Ausblenden von Steuerelementen wird auf Android-Mobilterminals jedoch nicht unterstützt, kann aber dennoch durch einige Methoden erreicht werden.
Eine ausgefeiltere Methode besteht darin, das Video zu vergrößern und die Steuerleiste aus dem Sichtfeld zu verschieben, um den versteckten Effekt zu erzielen! Tatsächlich geht es darum, das Videoelement größer als den übergeordneten Container zu machen, sodass sich die untere Steuerleiste außerhalb des übergeordneten Containers befindet, und dann den übergeordneten Container auf Folgendes zu setzen: overflow:hidden, eine Methode zum Ausblenden der Wiedergabesteuerelemente! Der Nachteil besteht darin, dass das Video vergrößert wird, sodass Sie zum Vergrößern im Voraus eine Leerstelle lassen müssen.
Das x5-Kernel-Team des Android-Teams von Tencent hat die Einschränkungen bei der Videowiedergabe nicht unbedingt gelockert. Es verwendet das Attribut __x5-video-player-type="h5", um die Steuerelemente auszublenden Gleichzeitig __Das Video befindet sich nicht mehr oben, sodass andere Elemente oben schweben können .
Nachdem wir die gängigen Szenarien und Fallstricke bei der Videowiedergabe verstanden haben, können wir das Benutzererlebnis verbessern, indem wir entsprechende Lösungen für verschiedene Szenarien bereitstellen. Beispielsweise können H5-Seiten, die automatisch auf Mobilgeräten abgespielt werden, die Videowiedergabe indirekt auslösen, indem sie Benutzer zum Klicken oder Schieben anleiten. Dies ist der konservativste Ansatz, keine Fehler! Eine bessere Lösung besteht darin, Situationen, in denen die Wiedergabe verboten ist, automatisch abzuspielen und zu erfassen und den Benutzer dann zur Interaktion anzuleiten, um eine Videowiedergabe zu erreichen.
Video verwenden In den frühen Tagen war die Videowiedergabe auf mobilen Endgeräten stark eingeschränkt, da sie mit hohem Leistungsverbrauch, hohem Datenverkehr und Überlegungen zur Benutzererfahrung verbunden war. Mit der Verbesserung der Mobiltelefonleistung kam jedoch das Verkehrszeitalter und die Szene stärker Anforderungen wurden die Einschränkungen schrittweise gelockert, während dies auf der PC-Seite schrittweise gelockert wurde Beide entwickeln sich schrittweise von der „lockeren Generation“ zur „festziehenden Generation“ und aktualisieren ihre Strategien ständig, um den Benutzern ein besseres Erlebnis zu bieten. In Zukunft werden sie möglicherweise vereinheitlicht, und Entwickler können von der untersten Ebene beginnen von Kompatibilität und Anpassung Geben Sie es frei, damit Sie mehr Energie für die Arbeit auf höherer Ebene haben.
Wenn Sie an unserem Team interessiert sind, können Sie der Kolumne folgen, Github folgen oder Ihren Lebenslauf an 'tao.qit####alibaba-inc.com'.replace('####', '@') senden. Jeder mit hohen Idealen ist herzlich willkommen, sich anzuschließen ~
Ursprüngliche Adresse: https://github.com/ProtoTeam/blog/blob/master/201806/1.md
