This is the 21st day of my participation in the First Challenge 2022

Hi I am small seventeen _, before summed up the mobile terminal H5 audio and video playback problem, share with you ~

Audio cannot be played automatically in ios

Audio cannot be played automatically on ios, it needs to be triggered by user actions (TouchStart, click)

When the user touches the screen, play the audio until it really needs to play automatically

music.addEventListener('touchstart'.function(){
	music.play();
	music.pause();
})
Copy the code

If it is a wechat environment:

Old version (no need to introduce wechat SDK)

document.addEventListener("WeixinJSBridgeReady".function () {
    music.play();
}, false);
Copy the code

The new (the introduction of WeChat SDK res.wx.qq.com/open/js/jwe…

Documents: mp.weixin.qq.com/wiki?t=reso…

Auto-play in wx.ready

The ready method is executed after the config information is validated. All interface calls must be made after the result of the config interface. Config is an asynchronous operation on the client side, so if the relevant interface needs to be called when the page loads, it must be called in the ready function to ensure correct execution. Interfaces that are invoked only when triggered by the user can be invoked directly without being placed in the ready function.

wx.ready(function(){    
	music.play();
});
Copy the code

Video player (VideoJS), ios playback will automatically full screen

Videojs.com/getting-sta…

Solution: Add webkit-playsinline=”true” to the video TAB, playsinline=”true” in the browser, but if the App is related to the App itself, sometimes it will still automatically full screen.

H5 The height of the page is larger than the screen, and the video playback mode is abnormal

The first option

Click to play directly on the page. (problem: the video in playback will shake when sliding up and down the page, and the playback layer will float above the detailBar)

According to the data checked, wechat will hijack the video tag, so that the player layer is separated from the document flow, and z-index attribute has no effect on it.

webkit-playsinline = “true”

This property fixes the above problem on ios, but does not work on Android. The function is to support video inline playback, that is, the original location playback

playsinline = “true”

Android does not support the playsinline property for video to play inline. However, if you look at some of Tencent’s video HTML5, you will find that they can be played inline in wechat, and this feature requires application to be whitelisted.

X5-video-player-fullscreen =”true” x5-video-player-fullscreen=”true” x5-video-player-fullscreen=”true” x5-video-player-fullscreen=”true” x5-video-player-fullscreen=”true”

The effect is that when you click on the video on Android, it will play back to a larger screen, but slowly swiping up the video will not adjust the sound or brightness, but will reduce the height of the video and bring up the details bar. The reason for this has not been found.

Second option

Using a mask, that is, a pop-up frame, put a picture on the H5 page, and then click it to play the video in the small window of the mask (the second solution was finally adopted because the first solution failed to find a good solution)

A pop-up dialog box is displayed to position the video in a proper position. Ios supports a small landscape window for playback. As a result, the location is inaccurate and the video cannot be seen. The solution is to change the CSS properties in the onresize method to determine whether it is landscape or portrait. (Not the best way, but haven’t found another way)

The H5 page under the mask will scroll

Toggle the hidden and Scroll properties of overflow for different situations.