Exemple de code pour une analyse détaillée du problème de lecture en plein écran de H5 WeChat-Tutoriel H5-php.cn

Lors de la lecture de vidéos sous WeChat sur des téléphones iOS et Android, vous rencontrerez de nombreux problèmes. Par exemple, vous devez cliquer manuellement avant que la vidéo ne soit lue, et la vidéo sortira de la boîte WeChat et une barre de contrôle apparaîtra. . Si la vidéo n'est pas Tencent Video, après la lecture, il y aura des problèmes tels que la poussée publicitaire de Tencent Video

Solution : ajoutez quelques attributs à la balise vidéo et appelez la vidéo native h5.

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

Copier après la connexion

poster="images/1.jpg" : L'attribut spécifie l'image affichée lorsque la vidéo est téléchargée ou avant que l'utilisateur clique le bouton de lecture affichait l'image. Si cette propriété n'est pas définie, la première image de la vidéo est utilisée à la place.

preload="auto" : L'attribut spécifie que la vidéo doit être chargée après le chargement de la page.

webkit-playsinline et playinline : La vidéo est lue localement et ne se détache pas du flux de documents. Mais cet attribut est assez spécial. Il doit être intégré à la page Web de l'application, comme UIwebview dans WeChat, et permet à InlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES de prendre effet. En d’autres termes, si l’APP ne la configure pas, l’ajout de cette balise à votre page ne sera pas valide. C’est pourquoi WeChat sur les téléphones Android lit toujours les vidéos en plein écran, car l’APP ne prend pas en charge les lectures en ligne, contrairement à ISO WeChat.

Je voudrais ajouter ici que si vous souhaitez faire une diffusion en direct en plein écran ou une expérience H5 en plein écran, l'ISO doit définir et supprimer la balise webkit-playsinline, car elle n'est pas prise en charge si vous définissez sur false. Android n'en a pas besoin car le plein écran par défaut. Mais pour le moment, le plein écran comporte des commandes de lecture, que vous ayez défini les commandes ou non. Ceux qui diffusent en direct peuvent avoir besoin de commandes de lecture, mais le H5 en plein écran n'en a pas besoin. Pour supprimer les commandes pendant la lecture en plein écran, les paramètres suivants sont requis : lecture sur la même couche.

x-webkit-airplay="allow"On ne sait pas encore exactement ce qu'il fait, mais l'éditeur devine que cet attribut devrait faire en sorte que cette vidéo prenne en charge la fonction AirPlay d'iOS. Grâce à AirPlay, vous pouvez lire des vidéos, de la musique et des fichiers photo directement à partir de différents emplacements sur votre appareil iOS, c'est-à-dire que la lecture sans fil de fichiers audio et vidéo peut être réalisée via la fonction AirPlay. Le périphérique terminal utilisé pour la lecture doit également prendre en charge les fonctions correspondantes.

x5-video-player-type : Activer le lecteur H5 sur le même calque, c'est-à-dire que lorsque la vidéo est en plein écran, p peut être présenté sur la couche vidéo, ainsi que les propriétés spécifiques à WeChat Android. L'alias de lecture sur le même calque est également appelé lecture immersive. Il ressemble à un mode plein écran lors de la lecture, mais les barres de contrôle et de navigation WeChat ont été supprimées, ne laissant que les touches « X » et « < ». Le lecteur actuel de même couche n'est efficace que sur Android (y compris WeChat) et ne prend pas en charge iOS pour le moment. Quant à savoir pourquoi la lecture de la même couche n'est ouverte que sur Android, c'est parce qu'Android ne peut pas jouer localement comme l'ISO. Le plein écran par défaut bloquera certaines opérations de l'interface. Ce n'est pas grave s'il s'agit d'un H5 en plein écran, mais pour la diffusion en direct, des fonctions telles. comme barrage C'est impossible à réaliser, donc le concept de lecture sur la même couche résout ce problème pour le moment. Cependant, lors du test, il a été découvert que les différentes versions d'ISO et d'Android ont des effets légèrement différents.

x5-video-orientation : Déclarez l'orientation prise en charge par le lecteur, les valeurs facultatives sont l'écran horizontal paysage, l'écran vertical portrait. Portrait de valeur par défaut. Qu'il s'agisse d'une diffusion en direct ou d'un H5 plein écran, il est généralement lu verticalement, mais cet attribut nécessite x5-video-player-type pour activer le mode H5

x5-video-player-fullscreen : Paramètre plein écran. Il a deux valeurs d'attribut, true et false. True prend en charge la lecture en plein écran et false ne prend pas en charge la lecture en plein écran.

En fait, le navigateur ISO WeChat est le cœur de Chrome, et tous les attributs associés sont pris en charge, c'est pourquoi X5 ne prend pas en charge la lecture sur le même calque. Le navigateur Android WeChat utilise le noyau X5 et ne prend pas en charge certaines balises d'attribut telles que playinline, il est donc toujours en plein écran.

Il y a un autre problème. Dans WeChat sur Android, même si les attributs ci-dessus sont ajoutés, il y aura toujours un problème avec les bordures noires en haut et en bas, et l'écran ne pourra pas être en plein écran.

Solution : ajoutez l'attribut de style object-fit: fill; à la vidéo. S'il y a encore des bordures noires, il se peut que la taille de la vidéo soit inappropriée.

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

Copier après la connexion

*{
            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;}

Copier après la connexion

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

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!