Recently, we are studying the use of video instead of animation and video instead of sprite animation. We call this kind of video interactive video.
Traditional sprite animation: large disk space, slow downloading, especially online playback, will be slower
Too many files, too many http requests when playing online, will cause slow response or abnormal behavior. Therefore, there is an urgent need to develop a set of technology to replace sprite animation with video. We call this kind of video an interactive video
Problems with traditional video:
1. Can only be played in a square-shaped area
2. Under the iPad, it is a window to play, and under the iPhone, it can only be played in full screen.
3. When playing, it will definitely appear at the forefront
Interactive video has the following characteristics:
Under the iPhone, full-screen playback is not required, it can be played in one area
Interactive video can appear below ordinary graphic objects
Interactive video can have a mask, so that the background of the video can be removed and the video and ordinary graphic objects can be integrated
Summary: For the video used for playing, we will set it as a traditional video. For videos that need to be used for specific purposes, we set them as interactive videos. The research has yielded preliminary results. By the way, it summarizes the actual problems encountered in the audio and video development of the mobile H5 in the next few years and provides its own solutions. Take a look at the final actual effect: compatible with PC (>IE9), iphone, ipad, Android 5.0
Solve the problems of manual, automatic, and windowing on the iPhone, and it can basically be used in actual production. On the right is the original video mp4 file, the video on the left replaces the animation, and then supports the background mask effect, can reveal the base map, and supports a series of interactive operations
H5 audio
Every time an audio object is passed through new Audio, a new thread can be seen on IOS.
Solution: A new Audio object, by replacing different audio addresses, achieves the goal of not opening more threads.
Support is not good on Android
Solution: The problem on the lower version of Android is not solved. Generally, mixed development can be handled by adjusting the underlying interface, such as phonegap
Can't auto play on iphone
Solution: Automatic playback on iphone is a process done when IOS was designed. It seems to be to prevent automatic theft of traffic.
Simply put, it needs to be triggered manually by simulating the user, so we need to call this piece of code at the very beginning:
Copy code
//Fix the problem that the ios browser cannot automatically play audio. Create new audio when loading and replace src when using it.
Xut.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);
}
Copy the code above
If you bind such a code to the body: create an audio object by manually triggering it, and then save it in the global
When used as follows:
Copy code
//If you use Xut.fix.audio to specify src for ios browser, please refer to app.js for initialization
if (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. Simply put, it must be the object created by the user trigger to play.
H5 video audio
Video tags may be rarely used on the mobile terminal, Android support is too bad, visually 5.0 is better. The old problem on the iPhone cannot be played automatically (Save data, save your sister!!!), and the default is full-screen control to play. For a long time, I ignored this video processing. Android uses the bottom layer, iPhone directly uses VideoJS, the built-in flash and h5 switch, flash also has support problems. A while ago, the boss had a demand. We applied too many animations, all of them were combined animations of sprite routes, ranging from hundreds of megabytes to hundreds of megabytes under one app, so there is an urgent need for a solution to compress images. 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 convert 720P. High-definition movies, compressed to 10M/min, or 160K/sec. The file size of the image sequence is at least several tens of times smaller. 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 also fast. Even full-screen playback of 25 frames can be easily achieved.
The plan is finalized, and several problems to be solved are here.
The entire video, including some objects in the video, can respond to user clicks, slides and other operations under the iPhone, can be played in a window, can filter out the background, and can be used like a PNG image. The video replaces the animation, and then supports the background mask effect, which can reveal the base image, and also solves the problem of manual, automatic, and incomplete screen
iphone windowing
Solution: Combine processing through canvas + video tags
Principle: Get the original image frame of the video and draw it to the page through canavs
Here I directly attach the source code, the code is written in general, but highlights a few key 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 cumbersome. It needs to be interactive and drag the canvas to achieve the purpose of controlling the image. I haven't finished writing all of it yet, and general company needs will not have this. Here is a brief description, it is also processed by canvas + video, but a cached canvas container is required to do a preprocessing. Through preprocessing, get the pixels of each picture, and by changing the value of each pixel RBG, it can filter out the background, so that it can be used like a PNG image. I will write it later and publish it~~
Our other product:
