Probleme und Lösungen bei der H5-Videoentwicklung

Kürzlich habe ich einige Aktivitäten zum Einbetten von Videos durchgeführt und Erfahrungen mit dem Dotieren von Videos gesammelt. Nachfolgend schreibe ich die Fallstricke auf, auf die andere und ich gestoßen sind, und die entsprechenden Lösungen.
1. Aufgetretene Probleme und Lösungen
1.1. Das auf der iOS-Webseite abgespielte Video wird standardmäßig im Vollbildmodus angezeigt (durch Klicken auf das Video wird der Player für die Vollbildwiedergabe geöffnet).
Um das Problem zu lösen, dass nicht im Vollbildmodus abgespielt wird, können Sie die folgenden Attribute webkit-playsinline='true' und gamesinline='true' hinzufügen. Wenn das Festlegen der oben genannten Attribute keine Auswirkung hat, können Sie es versuchen mit dem folgenden Plug-in. iphone-inline-video
Hinweis: Wenn Sie eine Webseite in Weibo öffnen, um ein Video unter iOS abzuspielen, wird ein Player zum Abspielen des Videos angezeigt. Sie müssen auch das obige Plug-in verwenden. Persönlicher Test ist wirksam.
1.2. Empfohlene Videos werden nach der Videowiedergabe in Android angezeigt.
Das Videoelement in mobilen Browsern ist etwas ganz Besonderes. Es wurde sowohl in iOS- als auch in Android-Browsern verwendet auf der obersten Ebene der Seite und kann nicht abgedeckt werden. Später wurde dieses Problem unter iOS behoben, bei Android-Browsern blieb das Problem jedoch bestehen. X5 ist eine von Tencent auf Basis von Webkit entwickelte Rendering-Engine. Sie bietet ein spezielles Videoelement namens „Same-Layer-Player“, um das Covering-Problem zu lösen. Durch die Einstellung

x5-video-player-type="h5" 可以开启同层播放器，来避免播放后显示推荐视频的问题。
x5-video-player-fullscreen="true" //视频全屏播放
x5-video-orientation="portrait"//视频竖屏模式播放

1.3, Videoanpassung
Derzeit entwerfen Designer Videos im Allgemeinen nach den Standards von iPhone5 oder iPhone7 und können im Allgemeinen mit 100 % Breite abgespielt werden Video: Wenn Sie feststellen, dass das Video immer noch nicht funktioniert, müssen Sie das Objektanpassungsattribut entsprechend der tatsächlichen Situation festlegen, um das Problem zu lösen. Einzelheiten finden Sie in einem halbausführlichen Verständnis der CSS3-Objektpositions-/Objektanpassungsattribute
Hinweis: Im Webkit-Kernel-Browser ist die Standardeinstellung object-fit:contain.
1.4. JS steuert die Videowiedergabe
In iOS werden Video und Audio im Allgemeinen nicht aktiv abgespielt, es sei denn, der Benutzer klickt aktiv, daher ist es notwendig, die Interaktion der Schnittstelle über js zu überwachen, um sie zu steuern das Video der Wiedergabe.
Das Abspielen und Anhalten von Videos erfordert hauptsächlich das Aufrufen der Wiedergabe- und Pause-Methoden. Wenn während der Videowiedergabe eine Benutzerinteraktion erforderlich ist, wird die aktuelle Wiedergabezeit hauptsächlich über die Timeupdate-Methode überwacht. Schauen Sie sich einen Code an:

var isStop = false;
    videoElem.on('timeupdate', function () {
        var curTime = parseInt(videoElem[0].currentTime);
        if (curTime == 152) {//该时间点展示交互蒙层
            $('.js_first_stop').removeClass('hide');
        } else if (curTime > 152 && curTime == 153) {
            if (!isStop) {//解决ios暂停后再次点击播放不了问题，因为该处触发了多次，但是andriod没有该问题。
                isStop = true;
                videoElem[0].pause();
            }
        } else if (curTime == 248) {
            $('.js_second_stop').removeClass('hide');
        }
    });

Es muss bei der Überwachung des Timeupdate-Ereignisses eingeführt werden und Anhalten des Videos in iOS. Eine globale isStop-Variable, andernfalls erfolgt keine Reaktion, wenn Sie das nächste Mal klicken, um die Wiedergabe fortzusetzen (mehrere Pausen werden während der Zeitaktualisierung ausgelöst), aber Android hat dieses Problem nicht. Um das Ende des Videos zu bestimmen, können Sie sich das Endereignis des Videos anhören

videoElem.on('ended',function(){});

oder das Timeupdate-Ereignis des Videos überwachen und dann das Endattribut bestimmen. Wenn es wahr ist, bedeutet es, dass es vorbei ist. und wenn es falsch ist, bedeutet es, dass es noch nicht vorbei ist.

videoElem.on('timeupdate',function(){
   if(videoElem[0].ended){
    //播放结束
   }
}

Darüber hinaus ist auf der Android-Seite derselbe Layer-Player aktiviert, und die WeChat-Seite bietet außerdem zwei Überwachungsereignisse zum Betreten und Verlassen desselben Layer-Players. Geben Sie das Player-Ereignis derselben Ebene ein (Videowiedergabe starten).

videoElem.on("x5videoenterfullscreen", function(){}

Klicken Sie auf die Schaltfläche „Zurück“ in der oberen linken Ecke, um den Player auf derselben Ebene zu verlassen.

videoElem.on('x5videoexitfullscreen',function(){}

Als Letztes ist zu beachten, dass nach der Wiedergabe des Videos auf Android der Player derselben Ebene nicht automatisch beendet wird. Wenn es in Zukunft eine Anzeigeoberfläche geben sollte, wird diese auch im Player angezeigt, was sich sehr seltsam anfühlt. Dies kann durch Linksprung gelöst werden.
1.5, Canvas spielt Videos ab
Canvas kann Videos abspielen, aber auf einigen Android-Geräten kommt es zu schwerwiegendem Aliasing, und einige Android-Browser haben beim Abspielen nur Ton, aber keine Bilder.
1.6. Videokodierung
Video im MP4-Format benötigt h.264-Kodierung, andernfalls haben einige iOS nur Ton, aber kein Bild.
Schließlich sieht die vollständige Videokonfiguration wie folgt aus und dient nur als Referenz

<video class="js_video" style="object-fit: cover; width: 100%; height: 100%;" preload="load" 
playsinline="true" webkit-playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true"
 x5-video-orientation="portrait"src="https://video.mdcdn.cn/friend2018.mp4"></video>

Verwandte Empfehlungen:

Beispiel für die Freigabe eines H5-Videoplayers auf gleicher Ebene

So aktualisieren Sie die H5-Hybrid-Entwicklungs-App

HTML5-Audio- und Videoprobleme und -lösungen

Das obige ist der detaillierte Inhalt vonProbleme und Lösungen bei der H5-Videoentwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!