Details about HTML5 audio and video problems and solutions on mobile terminals, and html5 audio

Details about HTML5 audio and video problems and solutions on mobile terminals, and html5 audio

Recently, we have been studying the use of video instead of animation, and video instead of genie animation. We call this video interactive video.

Traditional genie Animation:

1. Large disk space and slow download, especially online playback.
2. Too many files. Too many http requests during online playback may lead to slow response or abnormal behavior.

Therefore, a set of technologies are urgently needed to replace genie animation with videos. We call this video interactive video.

Traditional video problems:

1. Traditional videos can only be played in a square area.
2. Traditional videos are played in windows on the iPad. They can only be played in full screen on the iPhone.
3. Traditional videos must appear at the frontend during playback.

Interactive videos have the following features:

1. Under the iPhone, you do not need to play in full screen. You can play in one area.
2. Interactive videos can appear under Common Graphics objects.
3. Interactive videos can be masked, removing the background of videos and integrating videos with Common Graphics objects.

Summary:Simply play a video, we will set it as a traditional video. For videos that need to be used for specific purposes, we will set them as interactive videos.

This research has already achieved initial results. By the way, we will summarize the actual problems encountered in audio and video development in Mobile H5 in the next few years and provide our solutions.

See the final results: compatible with PC (> IE9), iphone, ipad, and Android 5.0

It solves problems such as manual, automatic, and window-based on the iphone and can be used in actual production.

The right side is the original video mp4 File

The video on the left replaces the animation, and then supports the background masked effect. It can reveal the basemap and support a series of interactive operations.

H5 audio

Every time a new Audio object is used, a new thread is generated on IOS, Which is disgusting.

Solution: A new Audio object replaces different Audio addresses to achieve the goal of not opening threads.

Unsupported on Android

Solution: the problem on Android is not solved in earlier versions. Generally, hybrid development can call underlying interfaces for processing, such as phonegap.

Cannot play automatically on iphone

Solution: automatic playback on the iphone is a process designed by IOS. It seems to be designed to prevent automatic traffic theft.

To put it simply, you need to simulate the manual trigger of the user, so we need to call the following code at the beginning:

This is my project, and I just deducted it.

// Fixed the problem that the ios browser could not automatically play the audio. when loading the audio, you can change src to Xut when creating a new audio. fix = 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 the code to the body: manually create an audio object and save it to the global

The usage is as follows:

// If Xut is used for ios browser. fix. for details about how to specify src initialization for audio, see app. jsif (Xut. fix. audio) {audio = Xut. fix. audio; audio. src = url;} else {audio = new Audio (url);} audio. autoplay = true; audio. play ();

Simply replace the audio object. To put it simply, you must automatically create an object that is triggered by the user before it can be played.

H5 video audio

Video tags may be rarely used on mobile terminals. Android support is too bad, and it is improved only after 5.0 of the video tags are tested.

Old iphone problems, cannot play automatically (save traffic, save your sister !!!), By default, full-screen controls are used for playback.

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

A while ago, my boss had a demand. We applied too many animations, all of which were a combination of Sprite routes. A single app went down to hundreds of M.

Therefore, there is an urgent need to compress images.

The final solution is to use video instead of animation, because the video compression technology has developed for many years and has become very mature. Nowadays, video compression technology can easily compress 160 p HD movies to 10 Mb/s or Mbit/s. It is at least dozens of times smaller than the size of the Image Sequence File. At the same time, most devices support Video hardware decompression. In this way, the CPU consumption for video playback is very low, the battery consumption is very low, and the playback speed is fast. It can be easily implemented even if 25 frames are played on the full screen.

After the solution is finalized, several problems need to be solved.

1. The entire video, including some objects in the video, can respond to users' clicks, slides, and other operations.
2. Play in a window under the iPhone
3. The background can be filtered out to be used like a PNG image.

The final effect is also shown in GIF Animation:

The video replaces the animation, and then supports the background mask effect to reveal the basemap.

It also solves the problem of manual, automatic, and non-full screen.

Iphone window

Solution:

Combined processing using canvas + video labels

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

I directly attached the source code here. The code is generally written, but it highlights several key points.

Http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser

Video instead of Animation

This is a little troublesome and requires interaction. You need to drag the canvas to control the image. Currently, I have not finished writing it all. This is not a simple description for general companies, it is also processed by canvas + video, but a cached canvas container is required for preprocessing. Through preprocessing, the pixels of each image are obtained and the RBG value of each pixel is changed, it can filter out the background, so that it can be used like a PNG image. It will be well written in the future. Let's release it ~~

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.