Background: Recently, we developed a requirement that when entering WeChat H5 page, the video will automatically start playing, at the same time, there will be a hover jump page button on the video, and when the video is finished playing, the video will hide and display a result page.

Difficulties and solutions: The requirements seem very simple and normal, without any draconic ability requirements. But there are a lot of pitfalls, mainly because WeChat itself has a lot of limitations.

Based on the desired demand points, let’s look at what the problems are: 1

The requirement is that the video should automatically start playing as soon as it enters the page. We have added the autoplay property as a matter of course, but in WeChat its function is to increase code readability and so on. But WeChat does provide a WeixinJSBridgeReady event, in which we can start it playing with JS

document.addEventListener(
  'WeixinJSBridgeReady',
  function() {
    video.play();
  },
  false
);

But it’s not that simple. On Android, at least on my Mi 8SE, videos still don’t play automatically. Some people on the net say that because the video has not been loaded when playing, make a timer to rescue repeatedly on the line, but my mobile phone is always in the situation of rescue failure. So what’s the result? Our video is stuck in an unplayed preview with a play button in the middle

At this point, there are some solutions, such as making a UI diagram for this situation when previewing, inducing the user to click the middle play, etc., but in any case, universal autoplay has been aborted. So after the compromise, just came in, we changed to full screen induced a user clicks on shade the video image, click on the display and began to play after the video, pay attention to not click video broadcast video, but click any we induced users to click on to go, because as long as there is a user interaction, we can play in the incident

// Click on the induction graph to start playing Cover. addEventListener(' TouchStart ', PlayVideo, true);

However, we need to pay attention here, because in this scheme, we use the scheme of hiding video first and then displaying it when playing, which is still in the Android environment. If someone like me finds that sometimes the video automatically pauses in black screen, the time obtained through video-currentTime is stuck at 0.001, and the timer rescue is invalid, too. If the user doesn’t click Play, it’s going to stay stuck here reflecting the user’s big confused face

So big probability is in violation of the principle of a cause, namely video hidden in a state of play will be stopped, we don’t have to give up WeixinJSBridgeReady automatic playback capability, for example, in the video hidden stage is still trying to play for a moment, or are we to make video cache, the first time in just entering the page lets video play and pause first, etc., As long as you call play() while the video is hidden, you’re likely to be in that state on Android

2. Not full screen

What is expected is to play the video in the designated area, which is not a problem in itself. The default behavior of WeChat is also to play local video. However, it is worth noting that the local video playing of Android WeChat is achieved by using an independent suspended Native View, which is at a very high level, completely above the WebView. This means that our code, like z-index, will not be able to affect or override it at all, which is fine if your requirements don’t require anything to float on the video, and if the default style is acceptable. I didn’t try out the online story of a post-play commercial, but because we had to use the hover button, we dropped the Android local play.

3. The hover HTML button over the video

Local broadcast and suspend button on AnZhuoWei letter is conflict, but there are some cases spluttered pa online in my face, but look carefully will find that the face video address basic it is tencent’s own, so I choose to believe the legendary WeChat video white list, namely for the video under white list, AnZhuoWei letter won’t fancy to change, Give it the mercy to retain its rustic function.

If you don’t want to talk about whitelisting, then in the Android environment, local play and hover button are two conflicting requirements, must compromise one, we chose to play full screen in the Android environment and hover button. X5-video-player-type =”h5″. If this property is present, fullscreen will be enabled, but it is recommended to add x5-video-player-fullscreen=”true” to ensure compatibility. Note that even with these attributes, it will still play locally on iOS, but because iOS has not been changed by magic, so you don’t have to worry about those pain issues, at most, the two ends of the experience is not very consistent.

There is also a specific way to exit full screen

/ / exit full screen if (document. WebkitExitFullscreen) {document. WebkitExitFullscreen (); }

However, the full screen also has the problem of full screen. In some models, the top of the full screen will automatically hover <(exit) and ··(more) two icon buttons, which are in the video area, and may be overlapped with our own hover button. Therefore, it may be necessary to adjust the position of the hover button according to Android.

In addition, there will be a sharing function after clicking the button of the three points, which will not be preset by knb. configShare, and there is no API that can be set. Although the links shared through it can also be used, it will be very direct, for example, for our project

We’ve already talked about how KNB calls the WeChat interface by default, and sharing is standard bubble form in other scenarios, but in the sharing of the three dots in the upper right corner of the Android full-screen video, it’s like this. The feedback has been given to the students of KNB, but it seems that few people care about it. No solution has been found yet

4. Hide the control bar

Controls are hidden as much as they can be, and we’ve rightfully deleted the controls property, but it’s not that simple. Not using this property is expected in iOS WeChat, but on Android (why Android?) , may cause the problem that the video cannot be played, so the strategy I adopted is to naturally have Controls attribute, and delete this attribute when it is judged to be IOS. There is another way to solve this problem, which is to make a long video, hide the control bar out of view, and stop scrolling. It is a wild way, but at least it is a way

5. Disable global sliding

The fact that the page itself can swipe up and down is also very annoying. There are a lot of ways to disable it online, but not all of them work

body {
  overflow: hidden;
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  user-select: none;
  background-color: #FFF;
}

6. Video ADAPTS to different mobile phone proportions

The video aspect ratio is fixed, but phones have different screen proportions, which is even more problematic in our case of full-screen video. And the width of the video we adopt the idea is to spread the screen width, and the video itself is longer (high), such as the adapter is iphoneX full-screen playback height, but the video is actually can discard the below part, there is no key content, even if is also not have subtitles, etc in the bottom, but the bottom on the position of the intermediate point, The requirement of this location is that full subtitles can still be viewed on small phones

The advantage of this is that there will be no bottom margin on a longer phone, and there will be no missing content on a smaller phone. In combination with not allowing swiping up and down, it is generally equivalent to a full-screen video