The concept of “immersive playback” is derived from the concept of immersive in Android development. Immersive is actually the page presented after hiding the status bar at the top and navigation bar at the bottom of the page. Ordinary users can easily confuse the immersive status bar with the transparent status bar. Their differences are as follows:

  • Immersive status bar Immersive Mode
  • Clear status Bar always Bar

So back to front-end development, let’s take a look at how to make the video tag present this kind of immersive playback effect. We usually use the video tag like this:

<div id="app"> <video ID ="videos" playsinline="true" webkit-playsinline="true" This property is used here to make IOS use inline mode when playing video, */ x5-video-orientation="portraint" preload="auto" style="width: 100%; height: 100%" > <source src="//gw.alicdn.com/bao/uploaded/TB1YKBlb_ZRMeJjSsppXXXrEpXa.mp4" type="video/mp4"> </video> </div>Copy the code

Under normal circumstances we do vertical version of the video, the proportion of the video is 16:9, namely high/wide approximately equal to 1.78, the test also 16:9 video, used here and by default video object – the value of the attribute is contain the fit, which is keep the aspect ratio, Let’s take a look at iPhone 6/7/8 without processing:

Performance on iPhone 6/7/8

It looks perfect, because these phones all have a 16:9 resolution, and there is no problem maintaining the screen size of the video. Next, let’s look at models with a resolution other than 16:9, which is typically iphoneX.

Performance on the iphoneX

Some people may wonder why we set the width and height of the video to be 100% up and down, and there are two white bars missing. In fact, this attribute is object-fit. Since the default is contain, let’s change it to fill and have a look at the effect:

object-fit:fill

That seems fine, but do you think the product sister will let you off so easily? Too navie, you can see that our normal 16:9 video is distorted on an 18:9 screen like the iphoneX, and with so many different resolutions on the market, it’s impossible to do that when you’re trying to get the closest user experience on different phones. Some people may mention the cover attribute in object-Fit. Yes, this attribute allows us to scale the video and so on. If the width and height do not match, the processing object will be clipping.

Effect in wechat

Other effects are pretty good, you will find a horrible full-screen button in the upper right corner, this full-screen button is built-in to wechat X5 kernel, it can not be removed, many people have raised the issue to Tencent X5 development team, but there is no way to deal with it for the time being, I will mention a new way later, back here first, Point after the full-screen button will enter WeChat full-screen playback mode, and after it finished will be a heap of advertising list, this is we don’t want to see, then if our product demand is not just a full-screen playback, also want to put some interactive button on the top of video, can’t do this way, because the video is in the upper level, However, there are two exceptions. One is that wechat whitelists your domain name, which can place DOM elements randomly on the video of Android phones, while IOS itself does not have this limitation. The other is a more general way to use the same layer playback mode of wechat X5 kernel, which has two advantages:

  • Removed the pesky “full screen” button in the upper right corner
  • X5 kernel immersive playback is really implemented, we see the current implementation of wechat or titleBar browser in x5 kernel environment to achieve the same layer of playback is very simple, just need to add the following two lines of attributes:
x5-video-player-type="h5"
x5-video-player-fullscreen="true"
Copy the code

Take a look at the effect at this point:

Effect in the same layer playback mode

If the webView in your app uses x5 kernel, this page can also achieve the same effect on the app. However, there are still some problems that cannot be solved in this same layer playback. First, the full-screen mode will recalculate the width and height and trigger the viewport size change. In other words, the user will have a visual port change process. Secondly, although the “full screen” button is missing in the same layer playback mode, the button in the upper left corner is used to exit the immersive full screen, and the button in the upper right corner is used to share. The shared content cannot be customized, and the combination of title+ URL of the current page is fixed. If you to the page customization demand is high, I have here an alternative solution, that is give up namely playback mode, of course, the premise is that you don’t need to do some interactions in video page, or your domain name under WeChat white list, when we are not under the immersion and want to scaling, such as the effect of video, At the same time, we also need to remove the “full screen” button that comes with X5. The best way is to dynamically calculate the width and height of the video, expand the video, and push the “full screen” button out of the browser page, so that basically we can achieve our goal. Here is an example of the 16:9 standard:

This.$nextTick() => {this.$nextTick() => {this.$refs.video const Ratio = Math. Fround (document. DocumentElement. ClientHeight/document. DocumentElement. ClientWidth) if (thewire > = 1.78) {/ / vertical screen Video. Height = document. DocumentElement. ClientHeight + 100 video. Width = math.h floor (video. ClientHeight * 0.572) const WinW = document. DocumentElement. ClientWidth video. The style.css. Left = (winW - video. Width) / 2 + 'px'} else {/ / widescreen Video. Width = document. DocumentElement. ClientWidth + 100 video. Height = math.h floor (video. Width * 1.78) const winH = document.documentElement.clientHeight video.style.top = (winH - video.height) / 2 + 'px' } })Copy the code

To explain the idea, the 16:9 video is about 1.78 aspect ratio, then larger than this ratio is similar to the iphoneX type of long screen phone, for this kind of phone we need to do proportional scaling adaptation based on the length of the phone, first make the video length equal to the length of the phone, Here I add 100 px understandable for up and down in the add 50 px, the purpose is to put the video length widening, let “full screen” button to disappear in the line of sight, actually can try to modify this value, for wide is the 1/78 of The Times, and then use the absolute layout to set the left margin of video, can achieve the effect of the geometric scaling, The same is true of the code for handling widescreen phones, but there are better ways to do this in the comments section