Eine kurze Diskussion über die Beseitigung der Fallstricke von HTML5-Videos auf mobilen Endgeräten

In diesem Artikel wird das HTML5-Video-Mobilterminal vorgestellt, die Fallstricke ausgeräumt und mit allen geteilt. Die Details lauten wie folgt:

 <video id=video style=object-fit:fill autoplay webkit-playsinline spieltinline x5-video-player-type=h5 x5-video-player-fullscreen=true x5-video-orientation=portraint src=video.mp4 />< /video><!-- object-fit: fill Der Videoinhalt füllt den gesamten Videocontainer poster:img.jpg Automatische Wiedergabe des Videocovers: Automatische Wiedergabe automatisch - Laden Sie das gesamte Video, wenn die Seite lädt. Metadaten – Laden Sie nur die Metadaten, wenn die Seite geladen wird. Keine – Laden Sie das Video nicht, wenn die Seite geladen wird. Stummgeschaltet: Wenn dieses Attribut festgelegt ist, gibt es an, dass die Audioausgabe des Webkits stummgeschaltet werden soll -playsinline gamesinline: Inline-Wiedergabe x5-video-player-type=h5: x5-Core-H5-Player aktivieren x5-video-player-fullscreen=wahre Vollbildeinstellung. Die Einstellungen von true und false führen zu unterschiedlichen Layouts. x5-video-orientation=portraint: gibt die vom Player unterstützte Richtung an. Die optionalen Werte sind Querformat-Horizontalbildschirm und Hochformat-Vertikalbildschirm. Standardwert Porträt. Unabhängig davon, ob es sich um eine Live-Übertragung oder einen H5-Vollbildmodus handelt, erfolgt die Wiedergabe im Allgemeinen vertikal. Für dieses Attribut ist jedoch x5-video-player-type erforderlich, um den H5-Modus zu aktivieren ->

 <Video-Autoplay></video>

In vielen mobilen Browsern ist jedoch die tatsächliche Aktion des Benutzers (Standardereignisse wie Touchend-, Klick-, Doppelklick- oder Keydown-Ereignisse) erforderlich, um den Aufruf von video.play() auszulösen, damit Audio und Video automatisch abgespielt werden.

 dom.addEventListener('click', function () { video.play()})

Video.play() kann auch in wx.ready() ausgelöst werden

 wx.ready(function () { video.play()})

Legen Sie die Eigenschaft webkit-playsinline gamesinline fest

 <video id=video webkit-playsinline spieltinline /></video>

Beim Abspielen von Videos in iOS Safari und einigen Android-Browsern kann das Video nicht auf der h5-Seite abgespielt werden und das System übernimmt das Video automatisch.

Wenn Sie ein Video auf einer h5-Seite abspielen müssen, müssen Sie webkit-playsinline zum Video-Tag hinzufügen. Nach iOS 10 wird empfohlen, diese beiden Attribute gleichzeitig hinzuzufügen. Auch diesen Modus muss die App unterstützen.

 webview.allowsInlineMediaPlayback = YES;

Sowohl iOS Mobile QQ als auch WeChat unterstützen diesen Modus, aber Android WeChat legt auf.

Der integrierte Browser von Android WeChat verwendet den Tencent X5-Kernel und folgt nicht dem X5web-Standard. Einer davon ist das erzwungene Vollbildvideo. Nachdem das Video abgespielt wurde, werden QQs eigene Videoempfehlungen angezeigt.

Es wird gesagt, dass es eine Whitelist gibt und die Videoressourcen in der Whitelist nicht im Vollbildmodus angezeigt werden. Aber Tencent kann nicht mehr zur Whitelist hinzufügen. Urin, keine Lösung. . . . . .

Derzeit gibt es eine Lösung, die darin besteht, h5-Canvas zum Abspielen von Videos zu verwenden

Bei der Verwendung von Canvas treten Fallstricke auf: Das Video muss das Attribut x5-video-player-type=h5 hinzufügen, sonst bleibt das Video auf dem mobilen Endgerät hängen und kann nicht abgespielt werden. Ich persönlich denke, das liegt daran, dass das Video übernommen wird.

 <div class=wrapper> <video id=video style=display: none autoplay src=video.mp4 x5-video-player-type=h5></video> <canvas id=canvas></canvas></div> <script> var video = document.querySelector('#video') var canvas = document.querySelector('#canvas') var wrapper = canvas.parentNode var width = wrapper.offsetWidth var height = wrapper.offsetHeight var ctx = c.getContext('2d') var time = null canvas.width = width canvas.height = height canvas.addEventListener('click', function () { video.play( ) }) video.addEventListener('play', function () { time = window.setInterval(function () { ctx.drawImage(v, 0, 0, width, height); }, 20); video.addEventListener('pause', function () { window.clearInterval(time); }, false); , function () { window.clearInterval(time); }, false);</script>

Schließlich wurde festgestellt, dass, obwohl Canvas zum Abspielen von Videos verwendet wird, empfohlene Videos nach der Vollbild-Videowiedergabe in Android WeChat blockiert werden können. Es gibt jedoch keine Möglichkeit, das Vollbildproblem beim Abspielen von Videos zu deaktivieren. Bekomme immer noch die böse weiße Liste. Machen Sie Beschwerden. . . . . . . . . . . . . . . .

Was noch ärgerlicher ist, ist, dass ich keine Möglichkeit gefunden habe, das Beenden im Vollbildmodus über js auszulösen.

Beim Abspielen eines Videos auf iOS erscheint kurz ein schwarzer Bildschirm und wird dann normal angezeigt.

Lösung:

Fügen Sie über dem Video ein Div hinzu und füllen Sie es mit einem Bild, um die Illusion zu erzeugen, dass es vor der Wiedergabe geladen wird. Hören Sie sich dann das timeupdate-Ereignis an und entfernen Sie diesen div-Block, wenn das Video abgespielt wird.

 video.addEventListener('timeupdate', function(){ if(video.currentTime > 0.1){ posterImg.hidden(); }})

HTMLVideoElement und HTMLAudioElement erben beide von HTMLMediaElement

 //Medienfehler MediaObj.error; //1 Benutzerbeendigung 2. Netzwerkfehler 3. Dekodierungsfehler 4. Ungültige URL //Der aktuelle Status des Mediums MediaObj.currentSrc; /Zurück zur aktuellen Ressourcen-URLMediaObj.src = value; //Zurückgeben oder die aktuelle Ressourcen-URL festlegenMediaObj.canPlayType(type);/Ob Ressourcen in einem bestimmten Format abgespielt werden können MediaObj.networkState; //0. Dieses Element ist nicht initialisiert 1. Normal, aber es wird kein Netzwerk verwendet. 3. Die Ressource MediaObj.load() wurde nicht gefunden. //Die von src MediaObj.buffered angegebene Ressource wird nicht gefunden. Zurück zum gepufferten Bereich, TimeRangesMediaObj.preload; //none: Metadaten nicht vorladen: Ressourceninformationen vorladen auto://ready state MediaObj.readyState; //1:HAVE_NOTHING //2:HAVE_METADATA //3.HAVE_CURRENT_DATA //4.HAVE_FUTURE_DATA //5.HAVE_ENOUGH_DATAMediaObj.seeking; //Ob gesucht wird//Wiedergabestatus MediaObj.currentTime = value; Position MediaObj .startTime; //Im Allgemeinen 0, wenn es sich um Streaming-Medien oder eine Ressource handelt, die nicht bei 0 beginnt, ist sie nicht 0MediaObj.duration; //Die aktuelle Ressourcenlänge gibt unendlich zurück MediaObj.paused; //Ob angehalten werden soll MediaObj.defaultPlaybackRate = value ; //Standard für die Wiedergabegeschwindigkeit können Sie festlegen MediaObj.playbackRate = value; //Aktuelle Wiedergabegeschwindigkeit, ändern Sie sie sofort nach dem Festlegen von MediaObj.played; //Gibt den Bereich zurück, der abgespielt wurde, TimeRanges, siehe unten für dieses Objekt MediaObj.seekable; //Gibt den Bereich zurück, der gesucht werden soll TimeRangesMediaObj.ended; //Ob MediaObj.autoPlay automatisch abgespielt werden soll .loop; //Ja Schleife abspielen MediaObj.play(); //Play MediaObj.pause(); //Pause//Videosteuerung MediaObj.controls;//Ob es eine Standardsteuerungsleiste gibt MediaObj.volume = value; //Volume MediaObj.muted = value; //Mute//TimeRanges (region) object TimeRanges.length; /Region Anzahl der Segmente TimeRanges.start(index) //Startposition des Indexsegmentbereichs TimeRanges.end(index) //Die Endposition des Indexabschnitts //[★★★**Verwandte Ereignisse**★★★]//Ereignisverteilung var eventTester = function(e){ Media.addEventListener(e, function(){ console.log ((new Date()).getTime(),e) },false);}//Ereignisüberwachung eventTester(loadstart); //Der Client beginnt mit der Datenanforderung eventTester(progress); //Der Client fordert Daten an eventTester(suspend); //Verzögerter Download eventTester(abort); //Der Client bricht den Download aktiv ab (nicht durch einen Fehler verursacht) eventTester(loadstart); progress) ; //Der Client fordert Daten an eventTester(suspend); //Verzögerter Download eventTester(abort); //Der Client bricht den Download aktiv ab (nicht aufgrund eines Fehlers), eventTester(error); //Beim Anfordern von Daten ist ein Fehler aufgetreten. eventTester(play); //EventTester(pause) wird ausgelöst, wenn play() und autoplay mit der Wiedergabe beginnen; //pause() löst die Wiedergabe aus; ); //Ressourcenlänge erfolgreich erhalten eventTester(loadeddata); //eventTester(waiting); //Warten auf Daten, kein Fehler eventTester(playing); //Wiedergabe starten eventTester(canplay); //Kann abgespielt werden, kann aber aufgrund des Ladens angehalten werden eventTester(seeking); /Finde eventTester(timeupdate); //Wiedergabezeit geändert eventTester(ended); //Wiedergaberate geändert eventTester(durationchange); //Änderungen der Ressourcenlänge eventTester(volumechange); //Volumenänderungen

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.