Method for realizing H5 WeChat play full screen

This article mainly introduces the method of implementing H5 WeChat playing full screen, having a reference value, and friends needed can be referred to. I hope that everyone has a big gain after reading this article. Let’s take a look at you with everyone.

Workaround: add some attributes to the VIDEO tag, call H6 native video.

 X5-video-orientation = "portraint" / * player payment, Landscape horizontal screen, portraint vertical screen, default is vertical screen * / Style = "Object-Fit: Fill">   POSTER = "images / 1.jpg":  The attribute specifies the image displayed when the video is downloaded, Or the image displayed before the user clicks on the play button. 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-PlaysNLine and Plays:

Local field playback when video playback, no detailed 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, it is necessary to add users who want to do full-screen live or full screen H5 experience, ISO needs to set the deletion of Webkit-PlaysLine labels, becauseSetting false for you 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 a 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” It is temporarily unable to know its role, but Xiaobian guess, this property should be the AIRPLAY function of this video. 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.


Enables the same H5 player, which is in the video full screen, and P can be presented on the video layer and is the unique attribute of the WeChat Android version. The same layer is also called immersive play, it seems to be full screen, but has remained the navigation bar of Control and WeChat, leaving only “X” and “

X5-Video-Orientation : Declare the direction of the player, 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 needs X5-Video-Player-Type 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’s kernel, and the relevant attributes are supported, and the reason why the X5 is playing does not support. Android WeChat browser is the X5 kernel, some attribute tags are not supported, so Always full screen.

[There is also a problem, in the Android WeChat, even if the above properties are added, there will be black edges, and there is a problem that cannot be full screen. Workaround: Add Object-Fit: Fill; STYLE attribute. 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; 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;}

Thank you can read this article carefully, I hope that Xiaobian share the method of implementing the H5 WeChat play full screen. The content is helpful, and it is also I hope everyone supports Tumi Cloud, pays attention to Tumi Cloud Industry Information Channel. If you encounter problems, you will find TUMI clouds, and the detailed solution is waiting for you!

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment