How to implement H5 WeChat playback in full screen

This time I will bring you how to implement H5 WeChat playback in full screen, and what are the precautions to implement H5 WeChat playback in full screen. The following is a practical case, let’s take a look.

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 that is displayed when the video is downloaded, or the image that is displayed before the user clicks the play button. 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 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 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. When playing, it looks like full screen, but the control and WeChat navigation bars have been removed, leaving only the "X" and "<" keys. The current same-layer player only works 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 of 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><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>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the storage method of H5

##zepto realizes seamless scrolling up and down on the mobile terminal

The above is the detailed content of How to implement H5 WeChat playback in full screen. For more information, please follow other related articles on the PHP Chinese website!