Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to solve the problem of compatibility of video video in Android on html5 mobile. It is very detailed and has certain reference value. Friends who are interested must finish reading it.

As a matter of fact, there are no problems on the ios side. Basically, they are all on the android side, and almost every project with video will encounter. Of course, there are special needs. In addition, there are several main aspects of the problem:

Full screen processing

Auto playback

Playback control

Hide playback controls

Full screen processing of video

In fact, this is not difficult. You only need to add a webkit-playsinline attribute to the video tag. This attribute is basically fine on mobile devices based on the webkit kernel. This full screen is not the other full screen. It is the full screen in the browser window and does not occupy the full screen of the entire phone. Of course, what we need to do the web end is the full screen within the body of document.

Under ios, after the video is embedded and the metadata of the media is loaded, it will be displayed in full screen, or add a poster to see the screen. But under android, most machines do not display video images, or display a black playback control that is not full screen, even with a poster cover. Because poster is not compatible with android, it is better to add a div to the upper layer of the video to spread a picture. The better way to handle this is to add a layer of div on the video as the cover. Because android does not allow something on the upper layer of the video, the video is first set to width:1px. When the video is played, the cover of the upper layer is remove, and the width:100% or the width you want.

Automatic playback of video

I don't want to say much about this. I believe you are just like me, trying to find android, the page can be automatically played after loading, but the reality is cruel, android is not allowed to play automatically, even if you use video.play (), it is not possible. There must be active triggers from the user, such as touching the screen and generating click or touch events. I don't know if android will improve in the future, but at least not for now. A good way to compare is to guide the user to trigger the behavior of sliding screen or touch, and then call video.play () to play it, giving the user the illusion of automatic playback.

Control of video playback

For media elements such as video or audio, there are some methods, such as play (), pause (), and some events, such as' loadstart','canplay','canplaythrough','ended','timeupdate'.. Wait.

There are some pits on the mobile side that need to be noted. Do not easily use event events other than 'ended','timeupdate'' of media elements. Different situations may occur on different machines, such as:

Listening for 'canplay'' and 'canplaythrough' (whether enough data has been buffered for smooth playback) under ios will not be triggered when loading, even if preload= "auto" is useless, but it will be triggered during the loading stage under pc's chrome debugger and android. Ios needs to be played before it is triggered.

In short, the current video standard is not perfect, there are many holes to pay attention to, it is best to test it yourself before using it.

Another point about control is that android has a control initialization process when playing a video. When a full-screen video is disguised as a non-video, we do not want to see it. My solution is as follows:

Initialize it in advance when we need to play it, that is, set width:1px; before the time we need to play, and then play () so that the video has already been played initialized. And then when you play () again when you need to play it again, it won't happen when you stretch the control.

"remove" the playback control bar under android

It is believed that this problem has perplexed countless front-end developers. When searching for a solution to this problem, almost all the articles tell you that the controls of the player cannot be accessed under android. In fact, this seems to be the case, but after you have seen the Imperial Palace crossing H5 and Wu Yifan's H5, you will find that there is no control bar under android. When I first saw those H5 videos, I didn't see how novel their content was and how widely they spread. I immediately tested the compatibility issues under android and found that there was no control bar. When I failed for a long time, I saw in a technical post that: because it is Tencent's own project, Wechat is Tencent's own. They have made some configurations in the browser and have a "preferential treatment" for their H5. In order to ensure the smooth "disguise" of the video.

I have not really verified the above statement, but it seems to be the case. Fortunately, the video project I am working on is also owned by Tencent. In fact, I have the opportunity to confirm the above statement to them, but even so, only Tencent's project has such a solution, which seems too unfair to the majority of developers. I tried to find a solution to remove playback controls. The following is a solution that I have put a lot of effort into finding. It seems simple and not so noble, but it does solve the problem. Share with you:

I only look at the situation of android here. There is basically nothing wrong with ios, so I ignore it.

Android version of the tester: 5.1

First of all, let's embed that H5 video address into our own page, and you will find that the player does appear. As follows

What should we do? there is nothing we can do about Tencent's own project? After searching for more than N data, I found a detail: the control bar is always at the bottom. Can you enlarge the size of the video and top the control bar to the outside of the browsing window? so I magnified the width and height of the video to 120%-the control bar magically 'disappeared' (actually top to the outside of the window). It was a great surprise.

The specific ideas and implementation are as follows:

Outsource video tags in html

The initial style sheet is as follows:

Html,body {padding: 0; margin: 0; width: 100%; height: 100%;-webkit-user-select: none; user-select: none; overflow:hidden;}. Videobox {width: 100%; height: 100%; position: absolute; left: 0; top: 0; overflow:hidden;} video {width: 1pxash display: blcok;} / * Note: overflow:hidden in html,body is very important and cannot be saved. Because the player of Wechat android is out of DOM structure, it will not respond to click, touch and other events. If the video size is large, it will generate scrolling bars, which must be added in html and body to add overflow:hidden, and useless in videobox. , /

Change the width of the video when the video is to be played (the height will be scaled proportionally, even if the custom height is useless and will be ignored):

Var video = document.querySelector ('# mainvideo'); var videobox = document.querySelector ('.videobox'); / / change the width of the outer package during playback to increase the width of the video, / / the corresponding height is also increased, and the player control is squeezed so that var setVideoStyle = function () {videobox.style.width = '120%; videobox.style.left ='-10% 'can't be seen or touched with the overflow:hidden / / control. Video.style.width = '100% salary;}

Of course, the above is mixed with some requirement logic, or you can directly change the stylesheet to width:120%, or larger; this depends on your own needs, but the basic idea is to push the player controls out of the window to achieve a 'remove' and 'disappear' effect. Even the word 'small window' has been pushed out, and students who have used android or tested all know what happens after clicking on the small window. (even if the original player is removed, the word small window is still there, so it can not be regarded as completely hiding the playback control.)

Solutions to some of the corresponding problems:

1. What if the video is enlarged and part of the picture will be cut off?

This can leave some white space on both sides and the bottom of the video output, that is, the blank can be useless on the black background of the picture, but it is also part of the size of the video. After the video is magnified, the main picture is filled with the window, and it is left blank when squeezed outside.

2. After the video is played, the playback control button will automatically appear in the middle.

If you really don't want a button to appear at the end of the playback, even if it is only a few seconds later, you can turn off the video remove. You can use timeupdate to monitor the video playback, use the difference of video.duration-video.currentTime to determine whether it is coming to an end, and remove it a few seconds before the end.

3, what if it's not full-screen video?

Yes, the idea is the same, push the video control out of the outer wrapping layer, using overflow:hidden. It's just that the outer package of the full screen is body.

Oh, we can finally get a full-screen video camouflage.

2017-03-21

With the change of time and the updating of equipment and technology, it is necessary to update responsibly in the spirit of not harming our compatriots.

Let's talk about ios and android from the above four main points.

Full screen processing

Auto playback

Playback control

Hide playback controls

Supplement-full screen processing

Ios with playsinline attribute. Before, only webkit prefix is used. After ios10, the system comes with its own player. Adding basic iOS to both attributes can guarantee introversion into browser webview. If there are still individual versions of ios that can hoist the player, you can also refer to a library iphone-inline-video (for specific use, take a look at its github. I won't introduce it here, just add js and css).

The github address is https://github.com/fregante/iphone-inline-video. Plus the two attributes of playsinline webkit-playsinline and this library can basically ensure that there will be no problems on the iOS side. (however, it seems that adding these two attributes only does not introduce the library into the library. So far, there is no problem with Wechat on the ios side. If you want to be compatible with uc or qq browsers, it is recommended to bring this library.)

Finally, a new x5 dom video player type = "H6" attribute, Tencent X5 kernel android Wechat and Mobile QQ's built-in browser webview kernel are introduced. Using this attribute, the video in Wechat will have different performance, showing a full-screen state. It seems that the playback control has been stripped off, at least after adding this attribute, other video elements can appear at the upper layer (not a processing measure of Tencent whitelist mechanism).

Supplement-automatic playback

Android can't be played automatically all the time, not to mention. It is worth mentioning that after testing, the ios10 version of safari and Wechat do not allow video to play automatically (incidental audio does not play automatically), but Wechat provides an event WeixinJSBridgeReady. After this event is triggered when Wechat is embedded in webview, the video can still be played automatically. This should be a more reliable way to automatically play Wechat videos on ios, such as Mobile Q or other browsers. It is suggested that it is better to guide the user to start the touch screen.

/ / you can also play once after this event is triggered and then pause (so that the video will be loaded later in preparation for smooth playback) document.addEventListener ("WeixinJSBridgeReady", function () {video.play (); video.pause ();}, false)

Supplement-playback control

With regard to control, there is only one point to add here, that is, when the video is played for the first time, on iOS, if the network is slow, there will be a short black screen (time to process video source data) from the beginning to the time when the video can be displayed. In order to avoid this black screen, you can add a div floating layer on the video (it can be a fake first frame of the video), and then use the timeupdate method to monitor, play the video screen and remove the floating layer when there is a picture:

Video.addEventListener ('timeupdate',function () {/ / when the currentTime of the video is greater than 0.1, the black screen time has passed and there is a video picture. You can remove the floating layer (div element of .pagestart) if (! video.isPlayed & & this.currentTime > 0.1) {$(' pagestart') .fadeOut (500); video.isPlayed =! 0;}})

Supplement-hide playback controls

It is said that the x5 kernel team of Tencent's android team has relaxed the restrictions on video playback, and videos may not necessarily call their much-maligned video player. The attribute of x5 video player player type = "H6" seems to have some meaning, although the experience is still a little bit. (the navigation bar will also be cleaned), but at least the player control is gone, and the upper layer can float div or other elements, which is worth mentioning.

Another thing worth mentioning is the hiding with player controls.

For example, this videobox is hidden under android, but it seems impossible to use display:none alone, but adding a z-index:-1 and setting it to-1 can achieve the purpose of hiding the player control. This test is useful and easy to use. You can give it a try.

The above is all the contents of the article "how to solve the problem of video video compatibility in Android on html5 mobile devices". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.