Comment résoudre le problème de la lecture plein écran dans HTML5 WeChat

Dans cet article, nous continuerons à vous apporter de nouvelles connaissances sur la façon de résoudre le problème de la lecture plein écran dans HTML5 WeChat. 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 devrez 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. la vidéo n'est pas Tencent Video, la vidéo ne sera pas lue après la lecture de la vidéo. Des problèmes tels que la diffusion publicitaire de Tencent Video se produisent

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>

poster="images/1.jpg" : L'attribut spécifie l'image affichée lorsque la vidéo est téléchargée, ou l'image affichée avant que l'utilisateur clique sur le bouton de lecture. 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 est chargée après le chargement de la page.

webkit-playsinline et Playsinline : lecture locale pendant la lecture vidéo sans rupture avec le flux documentaire. Cependant, cet attribut est assez spécial. Il doit être intégré dans 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" La fonction de x-webkit-airplay="allow" est actuellement inconnue, mais l'éditeur devine que cet attribut devrait permettre à cette vidéo de supporter 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 pour la lecture doit également prendre en charge les fonctions correspondantes.

x5-video-player-type : activez 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 le calque vidéo, ce qui est également un attribut unique de Version Android de WeChat. 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 ne fonctionne 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 du plein écran H5, mais pour la diffusion en direct, des fonctions telles. comme barrage Cela ne peut pas être réalisé, 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éclare l'orientation prise en charge par le lecteur. Les valeurs facultatives sont l'écran horizontal paysage et 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 : plein écran paramètre. 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 au 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 certaines balises d'attribut telles que Playsinline ne sont pas prises en charge, elles sont 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; 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></p>
<pre class="brush:php;toolbar:false">*{
            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('videoALL'),
    videobox = document.getElementById('videobox'),
    btn = document.getElementById('btn'),
    videoend =  document.getElementById('videoend');
var clientWidth = document.documentElement.clientWidth;
var clientHeight = document.documentElement.clientHeight;
videoALL.style.width = clientWidth + 'px';
videoALL.style.height = 'auto';
document.addEventListener('touchmove', function(e){e.preventDefault()}, false);
function stylep(pId){
    pId.style.width = clientWidth + 'px';
    pId.style.height = clientHeight +200+ 'px'; 
}
stylep(videobox);
stylep(videoend);
var u = navigator.userAgent; 
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端 
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 
function playcontr(){
    if (isAndroid) {
       videoALL.style.width = window.screen.width + 'px';
       videoALL.style.height = window.screen.height + 'px'; 
    }
    videobox.style.display = "block";
    videoALL.play();
    btn.style.display = "none";
    videoend.style.display = "none";
};
videoALL.addEventListener('pause',function(){  
    videoALL.style.width = clientWidth + 'px';
    btn.style.display = "block";
})  
videoALL.addEventListener("ended",function(){
    videoALL.pause();
    videobox.style.display = "none";
    videoend.style.display = "block";
});
</script>

L'avez-vous appris ? Dépêchez-vous et essayez-le.

Recommandations associées :

HTML5 ouvre la fonction de numérisation du téléphone mobile et ses avantages et inconvénients_html5 compétences du didacticiel

Le plus complet Résumé HTML5 des attributs globaux

Analyse du principe de commutation d'écran coulissant gestuel HTML5 sur une seule page

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!