Detailed explanation of how to implement full-screen playback on WeChat using HTML5

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. How to solve it? In this article, I will share with you the solution to the full-screen problem of HTML5 WeChat playback

When playing videos under WeChat on ios and Android phones, You will encounter many problems, for example, you need to click manually 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 a Tencent video, problems such as Tencent Video's advertising push will appear after playing.

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

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

webkit-playsinline and 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 be set Delete webkit-playsinline tag, because if you set it to false, it is not supported by Android. It is not needed because it defaults to full screen. But at this time, there is playbackcontrol in full screen, whether you have set the control 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 used 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 in full screen, p can be presented on the video layer, which is also a unique attribute of WeChat Android version. The alias of same-layer playback is also called immersive playback. It looks like full screen when playing, but the Navigation bar of control and WeChat has been removed, leaving only the "X" and "<" keys. The current same-layer player is only effective on 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 is impossible to achieve, 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, the 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>

【Related recommendations】

1. Html5 Free Video Tutorial

2. About H5 New Tag Detailed explanation of browser compatibility issues

3. Teach you how to use H5 to change the current url without refreshing. Detailed explanation of the example

4. Detailed tutorial of operating the database through phonegap

5. Detailed explanation of how to use the indexedDB database in H5

The above is the detailed content of Detailed explanation of how to implement full-screen playback on WeChat using HTML5. For more information, please follow other related articles on the PHP Chinese website!