Ausführliche Erklärung, wie Sie die Vollbildwiedergabe auf WeChat mithilfe von HTML5 implementieren

Beim Abspielen von Videos unter WeChat auf iOS- und Android-Telefonen treten viele Probleme auf. Beispielsweise müssen Sie manuell klicken, bevor das Video abgespielt wird, und das Video springt aus dem WeChat-Feld und eine Kontrollleiste wird angezeigt . Wenn es sich bei dem Video nicht um Tencent Video handelt, treten nach dem Abspielen Probleme auf, wie z. B. der Werbeschub von Tencent Video. In diesem Artikel werde ich die Lösung für das Vollbildproblem der HTML5-WeChat-Wiedergabe vorstellen 🎜>

Beim Abspielen von Videos unter WeChat auf iOS- und Android-Telefonen treten viele Probleme auf. Beispielsweise müssen Sie manuell klicken, um das Video abzuspielen, und das Video springt aus der WeChat-Box und einer Steuerleiste heraus wird angezeigt. Wenn es sich bei dem Video nicht um ein Tencent-Video handelt, treten nach der Wiedergabe Probleme wie der Werbe-Push von Tencent Video auf.

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

<video
  id="videoALL" 
  src="video/01.mp4" 
  poster="images/1.jpg" /*视频封面*/
  preload="auto" 
  webkit-playsinline="true" /*这个属性是ios 10中设置可以
                     让视频在小窗内播放，也就是不是全屏播放*/  
  playsinline="true"  /*IOS微信浏览器支持小窗内播放*/ 
  x-webkit-airplay="allow" 
  x5-video-player-type="h5"  /*启用H5播放器,是wechat安卓版特性*/
  x5-video-player-fullscreen="true" /*全屏设置，
                     设置为 true 是防止横屏*/>
  x5-video-orientation="portraint" /*播放器支付的方向，
                     landscape横屏，portraint竖屏，默认值为竖屏*/
  style="object-fit:fill">
</video>

poster="images/1.jpg": Das -Attribut gibt das Bild an, das angezeigt wird, wenn das Video heruntergeladen wird oder wenn der Benutzer auf die Wiedergabe klickt SchaltflächeBild zuvor gezeigt. 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 aus dem Dokumentenfluss 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, wenn Sie eine Vollbild-Liveübertragung oder ein Vollbild-H5-Erlebnis machen möchten, ISO eingestellt werden muss

löschen webkit-playsinline-Tag, denn wenn Sie Setzen Sie es auf „false“, es wird von Android nicht unterstützt. Es ist nicht erforderlich, da es standardmäßig auf Vollbild eingestellt ist. Zu diesem Zeitpunkt gibt es jedoch eine Wiedergabe--Steuerung im Vollbildmodus, unabhängig davon, ob Sie die Steuerung eingestellt 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 ​​der Wiedergabe auf derselben Ebene wird auch als immersive Wiedergabe bezeichnet. Beim Abspielen sieht es aus wie im Vollbildmodus, aber die Steuer- und WeChat-Navigationsspalten wurden entfernt, so dass nur die Tasten „X“ und „<“ übrig bleiben . Der aktuelle Same-Layer-Player ist nur auf Android (einschließlich WeChat) wirksam und unterstützt derzeit kein iOS. Der Grund, warum die gleiche Ebenenwiedergabe nur für Android möglich ist, liegt daran, dass Android nicht wie ISO lokal abgespielt werden kann. Der Standard-Vollbildmodus blockiert einige Schnittstellenvorgänge. Es ist in Ordnung, wenn es sich um einen Vollbild-H5 handelt, aber für Live-Übertragungen sind Funktionen wie z als Sperrfeuer Es kann nicht realisiert werden, daher löst das Konzept der Wiedergabe auf derselben Ebene dieses Problem derzeit. Beim Test wurde jedoch festgestellt, dass verschiedene Versionen von ISO und Android leicht unterschiedliche Auswirkungen haben.

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 unterstützt einige Attribut-Tags wie „playsinline“ nicht, sodass er immer im Vollbildmodus angezeigt wird.

Es gibt ein weiteres Problem mit WeChat auf Android, selbst wenn die oben genannten Attribute hinzugefügt werden, gibt es immer noch ein Problem mit schwarzen Rändern oben und unten 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 id="videobox">
   <video 
    id="videoALL" 
    src="mp4.mp4" 
    poster="1.jpg" 
    preload="auto" 
    webkit-playsinline="true" 
    playsinline="true" 
    x-webkit-airplay="allow" 
    x5-video-player-type="h5" 
    x5-video-player-fullscreen="true" 
    x5-video-orientation="portraint"
    style="object-fit:fill">
    </video> 
   <p id="btn" onclick="playcontr()"></p>
</p>
<p id="videoend"><p id="againbtn" onclick="playcontr()"></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;}

【Verwandte Empfehlungen】

<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>

1

Kostenloses HTML5-Video-Tutorial

2 .

Detaillierte Erläuterung der Browserkompatibilitätsprobleme mit neuen H5-Tags

3. Lernen Sie, wie Sie mit H5 die aktuelle URL ändern, ohne sie zu aktualisieren.

4. Detaillierte Anleitungen zum Betrieb der Datenbank über Phonegap 🎜>5. Detaillierte Erklärung zur Verwendung der indexedDB-Datenbank in H5

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung, wie Sie die Vollbildwiedergabe auf WeChat mithilfe von HTML5 implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!