How to solve HTML5 WeChat play full screen issues

This article mainly introduces how to solve the full screen problem of HTML5 WeChat play, the introduction is very detailed, with certain reference value, interested friends must have read!

Solution: Add some attributes to the VIDEO label and call H6 native video.

X5-Video-orientation = “portraint” / * player payment, landscape horizontal screen, portraint vertical screen, default value is vertical screen * / style = ” Object-fit: Fill “>
: The property specifies the image displayed when the video download is displayed, or it is displayed before the user clicks on the play button. image. If this property is not set, the first frame of the video is used instead.

preload = “auto”: The property specifies that the video is loaded after the page is loaded.

Webkit-Playsinline and PlaysLine: Video playback LAN playback, no detail flow. However, this property is more special, and the app is required to embed the web, such as the UIWebView of Wechat, UiWebViewBack = YES WebView.AllowsinlineMediaPlayback = YES can take effect. In other words, if the app is not set, you add this tag in your page, which is why the Android phone Wechat play video is always full screen, because the app does not support Playsinline, but ISO’s Wechat is supported.

Here to add, if you want to do full-screen live or full screen H5 experience, ISO needs to delete the Webkit-PlaysLine tag, because you set false is not supported, Android does not need, because the default full screen. But at this time, the full screen is playing control, no matter if you have COntrol. Making live broadcasts can be played with playback control, but full screen H5 is not needed, then remove the control at the full-screen playback, you need the following settings: The same is played.

X-webkit-airplay = “allow” is temporarily unable to know its role, but Xiaobian guessing, this property should be the AIRPLAY function that allows this video to support iOS. Using AirPlay can play video directly from different locations using iOS, there are photos files, that is, through the AirPlay feature, the wireless playback of audio and video files can be implemented. Of course, the premise is that the terminal devices playing the terminal device also supports the corresponding functions.

X5-Video-Player-Type: Enable the same level H5 player, is when the video is full screen, P can be presented on the video layer and also the Wechat Android version unique properties. On the same layer, the alias is also called immersive play. It seems full screen when playing, but has removed the Navigation bar of Control and WeChat, leaving only “x” and “

x5-video-orientation: Declaration Play The direction of support, optional value landscape horizontal screen, portraint vertical screen. Default portraint. Whether it is a live broadcast or full screen H5 is generally a vertical screen, but this property requires X5-Video-Player-Type to open H5 mode

X5-Video-Player-Fullscreen: Full-screen setting. Its two attribute values, Ture and false, true support full-screen playback, FALSE does not support full-screen playback. <"两键。目前的同层播放器只在Android(包括微信)上生效,暂时不支持iOS。至于为什么同层播放只对安卓开放,是因为安卓不能像ISO一样局域播放,默认的全屏会使得一些界面操作被阻拦,如果是全屏H5还好,但是做直播的话,诸如弹幕那样的功能就无法实现了,所以这时候同层播放的概念就解决了这个问题。不过在测试的过程中发现,不同版本的ISO和安卓效果略有不同。

In fact, ISO WeChat browser is Chrome The kernel, the relevant attributes support, and why is the reason why X5 is not supported. The Android WeChat browser is the X5 kernel, and some attribute tags are not supported, so they are always full screen.

There is also a Question, in the Android WeChat, even if the above attribute is added, there will be black edges, there is a problem with the black side, and the problem cannot be full screen.

Solution: Give Video, add Object-fit: Fill; STYLE property. If there is still a black side, it may be that the video size is not suitable.


* {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: hieight: auto; position: absolute; width: 100%; top: 0; Left: 0; Object -fit: Fill; Display: block; back: 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: BACKGROUND-SIZE: Cover; Background-Position: Top;}

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; = clientWidth + ‘px’; = ‘auto’; document.addEventListener ( ‘touchmove’, function (e) {e.preventDefault ()}, false); Function stylep (pid) { = ClientWidth + ‘px’; = ClientHEight +200+ ‘PX’;} stylep (video (videoeend); STYLEP (VideoEnd); Var u = navigator.USERAGENT; var isandroid = u.indexOf (‘Android’)> -1 || u.indexof (‘ADR’)> -1; // Android terminal var isios = !! u.match (/ \ (i [^;] +; (u;) CPU. + Mac OS X /); // iOS Terminal Function PlayContr () {if (isandroid) {Videoall.Style.Width = WINDOW.SCREEN.WIDTH + ‘PX’; Videoall.Style.Height = WINDOW.SCREEN. Height + ‘px’;} = “block”; videoall.display = “none”; = “none”;}; videoall.addeventlistener (‘ Pause ‘, function () { = clientwidth +’ px ‘; = “block”;}) videoall.addeventlistener (“ended”, function () {videoAll.pause (); VideoBox .style.display = “none”; = “block”;});
   How to solve all content of HTML5 WeChat play full screen problem, Thank you for reading! I hope to share the content help, more related knowledge, welcome to pay attention to Tumi Yun Industry News! 
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment