Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of how to solve the problem of HTML5 audio and video on mobile. The content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this article on how to solve the problem of HTML5 audio and video on mobile. Let's take a look.

Traditional genie animation:

Large disk space, slow download, especially online playback, will be slower

Too many files, when playing online, too many http requests will lead to slow response or abnormal behavior.

Therefore, there is an urgent need to develop a set of technology to replace genie animation with video. We call this video interactive video.

Problems with traditional video:

Traditional video can only be played in square areas

Traditional videos are played in windows under iPad, but only in full screen under iPhone.

Traditional videos, when played, must appear at the front end.

Interactive video has the following characteristics:

Under iPhone, it does not need to be played in full screen, but can be played in an area.

Interactive video can appear under ordinary graphic objects.

Interactive video can have a mask, which can remove the background of the video and integrate the video with ordinary graphic objects.

Summary: simply play the video, we will set it to the traditional video. And the video that needs to be used for a specific purpose, we set it as interactive video.

Its research has achieved preliminary results. By the way, it summarizes the practical problems encountered in the development of audio and video in Mobile H5 in the next few years and gives its own solutions.

Take a look at the actual effect: compatible with PC (> IE9), iphone,ipad, Android 5.0

The problems of manual, automatic and windowing on iphone have been solved, and can basically be used in actual production.

On the right is the original video mp4 file

The left video replaces the animation, and then supports the background mask effect, which can reveal the background image and support a series of interactive operations.

H5 audio Audio

Each time you new Audio an audio object, you can see that a new thread is generated on IOS, which is disgusting.

Solution: new Audio an object to achieve the goal of not opening more threads by replacing different audio addresses

The support on Android is not strong.

Solution: the problems on low-version Android are not solved. Generally, mixed developers can adjust the underlying interfaces, such as phonegap.

It cannot be played automatically on iphone

Solution: auto playback on iphone is a process designed by IOS, which seems to prevent automatic embezzlement of traffic.

To put it simply, you need to simulate the user to trigger it manually, so we need to call a piece of code like this at the beginning:

This is from my project, so I just deducted it.

/ / fixed a problem where ios browsers cannot play audio automatically. When creating a new audio when loading, you can change src = Xut.fix | | {}; if (Xut.plat.isBrowser & & Xut.plat.isIOS) {var isAudio = false var fixaudio = function () {if (! isAudio) {isAudio = true; Xut.fix.audio = new Audio () Document.removeEventListener ('touchstart', fixaudio, false);}}; document.addEventListener (' touchstart', fixaudio, false);}

If you bind a code on body that creates an audio object by manually triggering it, and then saves it in the global

When in use, the following

/ if you specify src initialization for ios browser with Xut.fix.audio, see app.jsif (Xut.fix.audio) {audio = Xut.fix.audio; audio.src = url;} else {audio = new Audio (url);} audio.autoplay = true;audio.play ()

You can directly replace the audio object. To put it simply, the object created must be triggered by the user before it can be played.

H5 video Audio

Video tags may be rarely used on mobile, Android support is too bad, visual 5.0 will improve.

The old problem on iphone cannot be played automatically (save traffic, save your sister!!), and the default is full screen control playback.

For a long time, I ignored this video processing. Android uses the underlying layer, iphone directly uses VideoJS, built-in flash and H6 switch, flash also has support problems.

Some time ago, the boss had a demand. We used too many animations, all of which were combined animations of elf routes, ranging from hundreds of meters to hundreds of meters per app.

So there is an urgent need to have a solution to compress the picture.

The final solution is to use video instead of animation, because video compression technology has been developed for many years and has been very mature. Now video compression technology can easily compress 720p HD movies into 10M/ minutes, or 160K/ seconds. It is at least dozens of times smaller than the file size of the image sequence. At the same time, most devices support hardware decompression of video, so that the CPU consumption of video playback is very low, the battery consumption is also very low, and the playback speed is fast. Even full-screen playback of 25 frames can be easily achieved.

When the plan is settled, several problems that need to be solved will come.

1. The entire video, including some objects in the video, can respond to user clicks, slides, and so on.

two。 Under iPhone, you can play it in a window.

3. It can filter out the background so that it can be used like a PNG image.

The actual effect is also shown at the beginning of the gif animation:

The video replaces the animation, and then supports the background mask effect, which can reveal the base image.

At the same time, the problems of manual, automatic and incomplete screen are also solved.

Iphone windowing

Solution:

Through the combination of canvas and video tags

Principle: get the original frame of video and draw it to the page through canavs

This is the end of this article on "how to solve the problem of HTML5 audio and video on mobile". Thank you for reading! I believe that everyone has a certain understanding of "how to solve the problem of HTML5 audio and video on mobile". If you want to learn more, you are 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.