Video compatibility in wechat

Time:2021-2-25

1. In line properties of video tag

  • SRC: URL of video
  • Poster: Video cover, no picture displayed when playing
  • Preload: preload
  • Autoplay: autoplay
  • Loop: loop playback
  • Controls: browser’s own control bar
  • Width: video width
  • Height: video height
  • style=”object-fit:fill” /Adding this style will make the Android / Web video full screen in wechat. If it is previewed on the mobile phone, the cover of the video will be the same size as the video/
  • WebKit playinline = “true” IOS wechat browser supports playing in small windows
  • X5 playinline = “true” IOS wechat browser supports playing in small window
  • Playinline = “true” IOS wechat browser supports playing in a small window
  • X-webkit-airplay = “true” supports the air play function of IOS
  • Airplay = “true” supports the air play function of IOS
  • X5 video player type = “H5” enable same layer H5 player
  • X5 video player fullscreen = “true” full screen setting
  • X5 video orientation = “portal” vertical screen covers
  • Muted = “true” mute playback

explain

1、preload=”auto” :Property specifies that the video is loaded after the page is loaded. If the autoplay property is set, it is ignored.

Possible values of general parameters:

·Auto – loads the entire video when the page loads

·Meta – loads only metadata when the page is loaded

·None – do not load video when page is loaded

2、muted:When set, it specifies that the audio output of the video should be muted

3、controls=”controls” :Property specifies that the browser should provide playback controls for the video.

4、autoplay=”autoplay”:Video autoplay settings, but experienced people should know that the autoplay tag is not compatible on the mobile phone, and the app settings are not able to autoplay, no matter Android or IOS. The need to simulate autoplay can only be triggered by some events.

5、webkit-playsinline playsinline:When the video is played, it can be played locally without breaking away from the document stream. However, this attribute is quite special. It needs to be embedded in the app of the web page, such as allow inline media playback = yes of uiwebview in wechat webview.allowsInlineMediaPlayback =Yes. In other words, if the app is not set, it will not work if you add this tag to your page. That’s why wechat on Android always plays videos in full screen, because app does not support playinline, while wechat on ISO does.

Here’s a supplement. If you want to do full screen live broadcast or full screen H5 experience, ISO needs to set and delete the WebKit playinline tag, because you don’t support setting false, Android doesn’t need it, because it’s full screen by default. But at this time, the full screen has playback control, no matter whether you have set control or not. Playing controls may be used for live broadcasting, but full screen H5 is not required. To remove the controls for full screen playback, you need the following settings: same layer playback.

6、x5-video-player-type:Enabling the same layer H5 player means that when the video is full screen, div can be displayed on the video layer, which is also a unique property of wechat Android version. The same layer play alias is also called immersive play. When playing, it seems to be full screen, but the navigation bar of control and wechat has been removed, leaving only “X” and “<” keys. At present, the same layer player only works on Android (including wechat), and does not support IOS for the time being. I have thought about why the same layer playback is only open to Android, because Android can’t play locally like ISO, and the default full screen will block some interface operations. If it’s full screen H5, it’s OK, but if it’s live broadcast, such functions as bullet screen can’t be realized, so the concept of same layer playback solves this problem. However, in the process of testing, I found that different versions of ISO and Android have slightly different effects.

7、x5-video-orientation:Declare the direction supported by the player. The optional values are landscape horizontal screen and portrait vertical screen. The default value is portal. H5 is generally played in vertical screen whether it is live or full screen, but this attribute requires X5 video player type to enable H5 mode

8、x5­video­player­fullscreen:Full screen settings. The author has not yet understood the purpose of this tag. During the test, it is found that the setting of true and false will lead to different layout, as shown in the figure where the tags are located.

In addition, the ISO wechat browser is the kernel of chrome, and all related properties are supported, which is why X5 does not support the same layer playback. Android wechat browser is the X5 kernel, and some attribute tags such as playinline are not supported, so it is always full screen.

2. Wechat H5 page is embedded with a small window video at a specified location

<video id=”video” class=”video” poster=”./images/poster.png” preload=”none” x5-video-player-type=”h5″ x5-video-player-fullscreen=”true” x-webkit-airplay=”true” airplay=”allow” webkit-playsinline=”true” playsinline=”true”></video>

Reference link:
1、https://www.cnblogs.com/baiyy…

Recommended Today

Third party calls wechat payment interface

Step one: preparation 1. Wechat payment interface can only be called if the developer qualification has been authenticated on wechat open platform, so the first thing is to authenticate. It’s very simple, but wechat will charge 300 yuan for audit 2. Set payment directory Login wechat payment merchant platform( pay.weixin.qq . com) — > Product […]