Mobile-H5 audio and video problems and solutions

Recently in the study of video instead of animation, has been preliminary results, by the way to summarize the development of the next few years to meet the actual problems and give their own solutions

Look at the final actual effect: Compatible with Pc,iphone, Android 5.0

Solved, manual, automatic, not fullscreen problem

The video on the left replaces the animation and then supports the background mask effect, revealing the Basemap

On the right is the original video file

H5 Audio

• Every time a new audio object is passed through new, it can be seen on iOS that it produces a thread, which is disgusting.

Solution:

New audio An object that achieves the purpose of not many threads by replacing different address

• Support on Android not to force

Solution:

The problem with the low version of Android is not solved, generally mixed development can be adjusted to the underlying interface processing, such as PhoneGap

• Does not play automatically on iphone

Solution:

Auto Play on iphone, is the iOS design time to do a deal, seemingly to prevent the automatic misappropriation of traffic it

Simply put, you need to simulate the user manually to trigger to

So we need to call this piece of code at the very beginning:

It's on my project, and I'm just going to pull it right over.

//fix an issue where iOS browser does not play audio automatically when creating a new video at load time replace SRCXut.fix = xut.fix| |{};if(Xut.plat.isBrowser &&Xut.plat.isIOS) {varIsaudio =false    varFixaudio =function() {        if(!Isaudio) {Isaudio=true; Xut.fix.audio=NewAudio (); Document.removeeventlistener (' Touchstart ', Fixaudio,false);    }    }; Document.addeventlistener (' Touchstart ', Fixaudio,false);}

If a code is bound to the body: Create an audio object by manually triggering and then save it in the global

When used, the following

// If you specify SRC initialization for iOS browser with Xut.fix.audio see App.js if (Xut.fix.audio) {    

=

 Xut.fix.audio;     =else  {    new  Audio (URL);} true ; Audio.play ();

Directly replace the audio object, simply, is to automatically must be the user triggers the creation of the object to broadcast

H5 Video Audio

Video tags may be used on mobile side very little, Android support is too bad, visual 5.0 to improve

Old problem on iphone, can't auto play (save traffic Ah, save your sister!!! ), and the default is Full screen control playback

For a long time, I ignored this video processing, Android with the bottom, iphone directly with Videojs, built-in Flash and H5 switch, Flash also has support issues

The former boss has a demand, we apply animation too much, is a combination of Elf Route animation, an app down hundreds of m to hundreds of m range

So there's an urgent need to have a plan to compress pictures

The final solution is to use video instead of animation, because the video compression technology has developed for many years, has been very mature. Video compression technology now makes it easy to put 720P

HD movies, compressed to 10m/minutes, or 160k/seconds. The file size is at least dozens of times times smaller than the image sequence. At the same time, most devices support the video

Hardware decompression, so that the video playback of the CPU consumption is very low, battery consumption is also very low, while playback speed is fast. Even 25 frames of full-screen playback, it is easy to

Is.

The solution is fixed, and several problems need to be solved.

1. The entire video, including some objects in the video, can respond to user clicks, swipe, and other actions
2. Under the iphone, you can play in a window
3. The ability to filter out backgrounds so that they can be used like PNG images

The final practical effect is also shown in the Start GIF animation:

The video replaces the animation, then supports the background mask effect, revealing the Basemap

Also solves the problem of manual, automatic, not fullscreen

iphone windowing

Solution:

Combine with canvas + video tags

Principle: Get the original frame of video, draw to the page by Canavs

Here I directly attached the source code to write the general, but highlighted a few points

http://iwearshorts.com/blog/inline-video-on-the-iphone/

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

Video instead of animation

This is a bit troublesome, need to do interaction, drag the canvas to achieve the purpose of controlling the image, at present I have not finished all, the general company needs will not have this

Here is a simple description of the same canvas + video processing, but need to have a cache of the canvas container to do a preprocessing

By preprocessing, get the pixel points of each graph, by changing the value of each pixel point RBG, to be able to filter out the background,

So as to be able to use the same as PNG image, later written, in the release bar ~ ~

Mobile-H5 audio and video problems and solutions