Comment implémenter la lecture H5 WeChat en plein écran

Cette fois, je vais vous montrer comment mettre en œuvre la lecture H5 WeChat en plein écran et quelles sont les précautions pour mettre en œuvre la lecture H5 WeChat en plein écran. Voici des cas pratiques, jetons un coup d'œil.

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 qui s'affiche lorsque la vidéo est téléchargée, ou l'image qui est affiché 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 précise que la vidéo doit être chargée après le chargement de la page.

webkit-playsinline et Playsinline : La vidéo est lue localement et ne se détache pas du 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 le 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 le calque vidéo, ce qui est également un attribut unique de la 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éclarez l'orientation prise en charge par le lecteur. Les valeurs facultatives sont paysage (écran horizontal) et portrait (écran vertical). 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 : réglage 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 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 ne prend pas en charge certaines balises d'attribut telles queplaysinline, 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; 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>

Je pense que vous maîtrisez la méthode après avoir lu le cas présenté dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le sujet. Site Web chinois PHP !

Lecture recommandée :

Explication détaillée de la méthode de stockage H5

zepto permet un défilement transparent de haut en bas sur le terminal mobile

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!