Explication détaillée de la façon de mettre en œuvre la lecture plein écran sur WeChat en utilisant HTML5

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. Dans cet article, je vais partager avec vous la solution au problème de lecture en plein écran de 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 pour lancer la lecture de la vidéo, et la vidéo sortira de la boîte WeChat et d'une barre de contrôle. apparaîtra. Si la vidéo n'est pas une vidéo Tencent, des problèmes tels que la poussée publicitaire de Tencent Video apparaîtront après la lecture

Solution : ajoutez des attributs à la balise vidéo. pour appeler 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 précise l'image affichée lorsque la vidéo est téléchargée, ou lorsque l'utilisateur clique sur lire Bouton Image affichée auparavant. 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 de documents. 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 être définie

supprimerbalise webkit-playsinline, car si vous définissez-le sur false, il n'est pas pris en charge par Android. Il n'est pas nécessaire car il est par défaut en plein écran. Mais à ce moment-là, il y a un contrôle de lecture en plein écran, que vous ayez réglé le contrôle 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 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 colonnes 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 disponible 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 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 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 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>

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

【Recommandations associées】

1

Tutoriel vidéo gratuit HTML5

2. .

Explication détaillée des problèmes de compatibilité du navigateur avec les nouvelles balises H5

3. Vous apprendre à utiliser H5 pour modifier l'URL actuelle sans actualiser. Exemples détaillés

4 Tutoriels détaillés sur le fonctionnement de la base de données via phonegap<.>

5.

Explication détaillée de la façon d'utiliser la base de données indexedDB dans H5

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!