Sample code for detailed analysis of H5 WeChat playback full-screen problem

When playing videos under WeChat on ios and Android phones, you will encounter many problems. For example, you need to manually click before the video will play, and the video will jump out of the WeChat box and a control bar will appear. If the video is not Tencent Video, After playing, problems such as Tencent Video's advertising push will appear.

Solution: Add some attributes to the video tag and call h5 native video.

<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": The attribute specifies the image displayed when the video is downloaded, or displayed before the user clicks the play button image. If this property is not set, the first frame of the video is used instead.

preload="auto" : The attribute specifies that the video is loaded after the page is loaded.

webkit-playsinlineand playsinline:When the video is played, it is played locally and does not break away from the document stream. But this attribute is quite special. It needs to be embedded in the webpage of the APP such as UIwebview in WeChat and allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES to take effect. In other words, if the APP does not set it up, adding this tag to your page will be invalid. This is why WeChat on Android phones always plays videos in full screen, because the APP does not support playsinline, but ISO WeChat does.

I would like to add here that if you want to do full-screen live broadcast or full-screen H5 experience, ISO needs to set and delete the webkit-playsinline tag, because it is not supported if you set it to false. Android does not need it because the default full screen. But at this time, full screen has playback controls, whether you have set the controls or not. Those who do live broadcast may need playback controls, but full-screen H5 does not need them. To remove the controls during full-screen playback, the following settings are required: same-layer playback.

x-webkit-airplay="allow"It is not possible to know exactly what it does, but the editor guesses that this attribute should make this video support the AirPlay function of ios. Using AirPlay, you can play videos, music, and photo files directly from different locations on your iOS device. That is to say, wireless playback of audio and video files can be achieved through the AirPlay function. Of course, the premise is that the terminal device for playback must also support the corresponding functions.

x5-video-player-type：Enable the H5 player on the same layer, that is, when the video is full screen, p can be presented on the video layer, also WeChat Android-specific properties. The alias of same-layer playback is also called immersive playback. It looks like full screen when playing, but the control and WeChat navigation bars have been removed, leaving only the "X" and "Android (including WeChat) and does not support iOS for the time being. As for why the same layer playback is only open to Android, it is because Android cannot play locally like ISO. The default full screen will block some interface operations. It is okay if it is full screen H5, but for live broadcast, functions such as barrage It cannot be realized, so the concept of same-layer playback solves this problem at this time. However, during the test, it was discovered that different versions of ISO and Android have slightly different effects.

x5-video-orientation：Declare the orientation supported by the player. The optional values ​​are landscape horizontal screen and portrait vertical screen. Default value portrait. Whether it is live broadcast or full-screen H5, it is usually played vertically, but this attribute requires x5-video-player-type to turn on H5 mode

x5-video-player-fullscreen: Full screen setting. It has two attribute values, true and false. True supports full-screen playback, and false does not support full-screen playback.

In fact, ISO WeChat browser is the core of Chrome, and all related attributes are supported, which is why X5 does not support same-layer playback. The Android WeChat browser uses the X5 kernel, and some attribute tags such as playsinline are not supported, so it is always full screen.

There is another problem. In WeChat on Android, even if the above attributes are added, there will still be a problem with black borders on the top and bottom, and the screen cannot be full screen.

Solution: Add the style attribute object-fit: fill; to the video. If there are still black borders, it may be that the video size is inappropriate.

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

The above is the detailed content of Sample code for detailed analysis of H5 WeChat playback full-screen problem. For more information, please follow other related articles on the PHP Chinese website!