So implementieren Sie die H5 WeChat-Wiedergabe im Vollbildmodus

Dieses Mal zeige ich Ihnen, wie Sie die H5-WeChat-Wiedergabe im Vollbildmodus implementieren und welche Vorsichtsmaßnahmen es gibt, um die H5-WeChat-Wiedergabe im Vollbildmodus zu implementieren. Hier sind praktische Fälle, werfen wir einen Blick darauf.

Lösung: Fügen Sie dem Video-Tag einige Attribute hinzu und nennen Sie h5 natives Video.

<video></video>
  x5-video-orientation="portraint" /*播放器支付的方向，
                     landscape横屏，portraint竖屏，默认值为竖屏*/
  style="object-fit:fill">

poster="images/1.jpg": Das -Attribut gibt das Bild an, das beim Herunterladen des Videos angezeigt wird, bzw. das Bild, das angezeigt wird angezeigt, bevor der Benutzer auf die Wiedergabetaste klickt. Wenn diese Eigenschaft nicht festgelegt ist, wird stattdessen das erste Bild des Videos verwendet.

preload="auto": Das Attribut gibt an, dass das Video nach dem Laden der Seite geladen werden soll.

webkit-playsinline und gamesinline: Das Video wird lokal abgespielt und bricht nicht vom Dokumentenstrom ab. Dieses Attribut ist jedoch etwas ganz Besonderes. Es muss in die Webseite der APP eingebettet werden, z. B. in UIwebview in WeChat, und erlaubt InlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES, um wirksam zu werden. Mit anderen Worten: Wenn die APP es nicht einrichtet, ist das Hinzufügen dieses Tags zu Ihrer Seite ungültig. Aus diesem Grund spielt WeChat auf Android-Telefonen Videos immer im Vollbildmodus ab, da die APP Playsinline nicht unterstützt, ISO WeChat jedoch.

Ich möchte hier hinzufügen, dass ISO das Tag webkit-playsinline löschen muss, wenn Sie eine Live-Übertragung im Vollbildmodus oder ein H5-Erlebnis im Vollbildmodus durchführen möchten, da es nicht unterstützt wird, wenn Sie es festlegen auf false. Android benötigt es nicht, da der Standard-Vollbildmodus aktiviert ist. Derzeit verfügt der Vollbildmodus jedoch über Wiedergabesteuerelemente, unabhängig davon, ob Sie die Steuerelemente festgelegt haben oder nicht. Diejenigen, die Live-Übertragungen durchführen, benötigen möglicherweise Wiedergabesteuerungen, aber H5 im Vollbildmodus benötigt diese nicht. Um die Steuerungen während der Vollbildwiedergabe zu entfernen, sind die folgenden Einstellungen erforderlich: Wiedergabe auf derselben Ebene.

x-webkit-airplay="allow"Es ist noch nicht genau bekannt, was es tut, aber der Herausgeber vermutet, dass dieses Attribut dafür sorgen sollte, dass dieses Video die AirPlay-Funktion von iOS unterstützt. Mit AirPlay können Sie Videos, Musik und Fotodateien direkt von verschiedenen Orten auf Ihrem iOS-Gerät abspielen. Das heißt, die drahtlose Wiedergabe von Audio- und Videodateien ist natürlich über die AirPlay-Funktion möglich Auch das für die Wiedergabe verwendete Endgerät muss die entsprechenden Funktionen unterstützen.

x5-video-player-type: Aktivieren Sie den H5-Player auf derselben Ebene, d. h. wenn das Video im Vollbildmodus angezeigt wird, kann p auf der Videoebene angezeigt werden ist auch ein einzigartiges Merkmal der WeChat-Android-Version. Der Alias ​​für die Wiedergabe auf derselben Ebene wird auch als immersive Wiedergabe bezeichnet. Beim Abspielen sieht es aus wie im Vollbildmodus, aber die Steuerungs- und WeChat-Navigationsleisten wurden entfernt, sodass nur die Tasten „X“ und „

x5-video-orientation: Deklarieren Sie die vom Player unterstützte Ausrichtung. Die optionalen Werte sind Querformat (horizontaler Bildschirm) und Hochformat (vertikaler Bildschirm). Standardwert Porträt. Unabhängig davon, ob es sich um eine Live-Übertragung oder einen H5-Vollbildmodus handelt, erfolgt die Wiedergabe normalerweise vertikal. Für dieses Attribut ist jedoch x5-video-player-type erforderlich, um den H5-Modus zu aktivieren

x5-video-player-fullscreen: Vollbildeinstellung. Es verfügt über zwei Attributwerte, true und false, unterstützt die Vollbildwiedergabe und false unterstützt nicht die Vollbildwiedergabe.

Tatsächlich ist der ISO-WeChat-Browser der Kern von Chrome und alle zugehörigen Attribute werden unterstützt, weshalb X5 die Wiedergabe auf derselben Ebene nicht unterstützt. Der Android WeChat-Browser verwendet den X5-Kernel und einige Attribut-Tags wie „playsinline“ werden nicht unterstützt, sodass er immer im Vollbildmodus angezeigt wird.

Es gibt ein weiteres Problem, selbst wenn die oben genannten Attribute hinzugefügt werden, gibt es oben und unten schwarze Ränder und der Bildschirm kann nicht im Vollbildmodus angezeigt werden.

Lösung: Fügen Sie dem Video das Stilattribut object-fit:fill; hinzu. Wenn immer noch schwarze Ränder vorhanden sind, ist möglicherweise die Videogröße nicht geeignet.

<p>
   <video>
    </video> 
   </p><p></p>

<p></p><p></p>

*{
            padding: 0;
            margin: 0;
        }
    #videobox{position: absolute;width: 100%;height: 100%;background-color: green;background-image: url(1.jpg);background-size: 100% 100%;background-position: top;overflow: hidden;}
    #videoALL{
  height: auto;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  object-fit: fill;
  display: block;
  background-size: cover;
  overflow: hidden;}
    #btn,#againbtn{width: 81px;height: 75px;position: absolute;top: 50%;left:50%;margin-top: -37.5px;margin-left: -40.5px;background-image: url(btn.png);background-size: 100% 100%;}
    #videoend{position: absolute;background-color: pink;display: none;background-image: url(2.jpg);background-size: cover;background-position: top;}

<script>
var videoALL = document.getElementById(&#39;videoALL&#39;),
    videobox = document.getElementById(&#39;videobox&#39;),
    btn = document.getElementById(&#39;btn&#39;),
    videoend =  document.getElementById(&#39;videoend&#39;);
var clientWidth = document.documentElement.clientWidth;
var clientHeight = document.documentElement.clientHeight;
videoALL.style.width = clientWidth + &#39;px&#39;;
videoALL.style.height = &#39;auto&#39;;
document.addEventListener(&#39;touchmove&#39;, function(e){e.preventDefault()}, false);
function stylep(pId){
    pId.style.width = clientWidth + &#39;px&#39;;
    pId.style.height = clientHeight +200+ &#39;px&#39;; 
}
stylep(videobox);
stylep(videoend);
var u = navigator.userAgent; 
var isAndroid = u.indexOf(&#39;Android&#39;) > -1 || u.indexOf(&#39;Adr&#39;) > -1; //android终端 
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 
function playcontr(){
    if (isAndroid) {
       videoALL.style.width = window.screen.width + &#39;px&#39;;
       videoALL.style.height = window.screen.height + &#39;px&#39;; 
    }
    videobox.style.display = "block";
    videoALL.play();
    btn.style.display = "none";
    videoend.style.display = "none";
};
videoALL.addEventListener(&#39;pause&#39;,function(){  
    videoALL.style.width = clientWidth + &#39;px&#39;;
    btn.style.display = "block";
})  
videoALL.addEventListener("ended",function(){
    videoALL.pause();
    videobox.style.display = "none";
    videoend.style.display = "block";
});
</script>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zum Thema PHP chinesische Website!

Empfohlene Lektüre:

Ausführliche Erklärung der H5-Speichermethode

zepto ermöglicht nahtloses Auf- und Abscrollen auf dem mobilen Endgerät

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die H5 WeChat-Wiedergabe im Vollbildmodus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!