When playing videos under the WeChat in iOS and Android phones, you will encounter a lot of problems. For example, if you need to click manually, the video will be played, and the video will jump out of the WeChat box to appear control bar. If the video is not Tencent video, the playback will be played. An advertising push for Tencent Video appears
Solution: Add some attributes to Video and call H5 native Video.<video id=videoALL src=video/01.mp4 poster=images/1.jpg /*视频封面*/ preload=auto webkit-playsinline=true /*这个属性是ios 10中设置可以让视频在小窗内播放, That is, is it a full-screen playback* / playSinline = true /*iOS WeChat browser supports small window playback* / x -webkit-airplay = Allow x5-Video-Player-Type = H5 /*H5 player, which is WeChat Android. Edition feature* /X5-Video-Player-FullScreen = TRUE /*Full screen settings to True to prevent horizontal screen* /-video-Orientation = Portraint /*Player Payment, LandScape horizontal screen, Portraint TV screen , The default value is the vertical screen*/ style = object-fils: fill> </ video>Poster = Images/1.jpg: The image displayed when the attribute specifies the video download, or the image displayed in front of the user click on the play button. If this attribute is not set, use the first frame of the video instead. Preload = Auto: The attribute specifies the video after the page is loaded. Webkit-Playsinline and PlaySinline: Local playback during the video playback, do not leave the document flow. But this attribute is more special. APPs that need to be embedded in web pages, such as the allowsinlinediaplayback = yes webview.allowSinLineDiaplayBack = yes in Wechat, to take effect. In other words, if the APP is not set, this label is not effective on your page. This is why the Android phone WeChat played video is always full screen, because the APP does not support PlaySinline, but ISO's WeChat supports it.
It is necessary to add here. If you want to do a full-screen live broadcast or full-screen H5 experience, the ISO needs to set up the webkit-polaysinline tag, because you set up FALSE is not supported, and Android does not need because the full screen is default. But at this time the full screen has played controls, whether you set Control whether you set up. The live broadcast of the live broadcast may be used, but the full -screen H5 is not needed, so the control of the control during full screen playback requires the following settings: the same layer playback.
X-WEBKIT-AIRPLAY = Allow can't know its role exactly for the time being, but Xiaobian speculates that this attribute should make this video support iOS's AirPlay function. Using AirPlay can play videos, music, and photo files directly from different locations on the device of iOS. That is to say, through the AirPlay function, the wireless playback of the audio and video file can be achieved. Of course, the player of the playback also supports the corresponding functions. X5-Video-Player-Type: Enable the same layer H5 player, that is, when the full screen of the video, the DIV can be presented on the video layer, which is also a unique attribute of the WeChat Android version. Play aliases on the same layer is also called immersive playback. It seems to be full screen when playing, but it has removed the navigation bar of Control and WeChat, leaving only X and <two -key. The current same -level player only takes effect 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, because Android cannot be played like ISO, the default full screen will cause some interface operations to be blocked. If it is full screen H5 It cannot be achieved, so the concept of the same layer at this time solves this problem. However, during the test, it was found that different versions of ISO and Android effects were slightly different. X5-Video-Orientation: Declars the direction supported by the player, optional value Landscape horizontal screen, portraint vertical screen. The default value portraint. Both live broadcast and full-screen H5 are generally played vertical screens, but this attribute requires X5-Video-Player-Type to open the H5 mode X5-Video-Player-FullScreen: Full screen settings. It has two other attribute values, Ture and False, True supports full -screen playback, False does not support full -screen playback.In fact, the ISO WeChat browser is the core of Chrome, and related attributes are supported, and it is why the X5 is not supported by the same layer. The Android WeChat browser is the X5 kernel. Some attribute tags, such as PlaySinline, do not support it, so always have a full screen.
There is also a problem. In the WeChat of Android, even if the attributes are added, there will be a problem with black edges up and down.
Solution: Add Object-FIT: fill; style attribute to Video. If there is still black edges, the video size is inappropriate.<div ID = VideoBox> <Video ID = VideoAll SRC = MP4.MP4 POSTER = 1.jpg Preload = Auto Webkit-PlaySinline = True Playsinline = True = Allow x5-Video-Player-Type = H5 X5- Video-Player-FullScreen = True X5-Video-Orientation = Portraint style = Object-FIT: Fill> </Video> <div ID = PlayContr ()> </DIV> </DIV > <div id = videoend > <div ID = againbtn onclick = PlayContr ()> </DIV> </DIV>
*{padding: 0; margin: 0;} #videobox {posity: absolute; width: 100%; height: 100%; background-color: Green; background-image: URL (1.jp g); Background-siZe: 100 %100%; Background-Position: Top; Overflow: HIDDEN;} #videoall {Height: Auto; Position: Absolute; Width: 100%; TOP: 0; LEFT: 0; Object-F IT: 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-heft: -40.5px; Background-Image: url (btn.png); background-size: 100% 100%;} #videoend {poss: absolute; background-color: pink; : None; Background-Image: URL (2. 2. jpg); Background-siZe: Cover; Background-POSITION: TOP;} <script> var videoall = document.GetelementByid ('VideoAll'), VideoBox = DOCUMENT.GetelementByid ('VideoBox'), btn = d ('btn'), videond = document.GetelementByid ('VideoEnd'); Var ClientWidth = document.docmeentelement.clientWidth; var clientheight = document.documentedlement.clientheight; videoall.style.width = clientWidth + 'PX' videoall.style.height = 'Auto'; document.addeventListener ('TouchMove', Function (E) {e.preventdefault ()}, false); Function style. 'px';} stylediv (videobox); styleDiv (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.head = window.screen.height + 'px';} videobox.style.display = block; videoall.play (); ay = None; videoend.style.display = None;}; videoall.addeventristener ('pause', function () {videoall.width = clientwidth + 'px'; eoall.addeventListener (Ended, Function () {videoalll .pause (); videobox.style.display = None; videoend.style.display = block;}); </script>The above is the solution to the HTML5 WeChat playback full -screen problem that I introduced to you. I hope it will be helpful to everyone. If you have any questions, please leave me a message. Xiaobian will reply to everyone in time. Thank you very much for your support for the VEVB Wulin website!