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.
- The entire video, including some objects in the video, can respond to user clicks, swipe, and other actions
- Under the iphone, you can play in a window
- 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