Напоследък изучаваме използването на видео вместо анимация и видео вместо спрайт анимация. Ние наричаме този вид видео интерактивно видео.
Традиционна спрайт анимация: голямо дисково пространство, бавното изтегляне, особено онлайн възпроизвеждането, ще бъде по-бавно
Твърде много файлове, твърде много http заявки, когато играете онлайн, ще доведе до бавен отговор или ненормално поведение. Поради това е спешно необходимо да се разработи набор от технологии, които да заместват спрайт анимацията с видео. Ние наричаме този вид видео интерактивно видео
Проблеми с традиционното видео:
1. Може да се играе само в квадратна форма
2. Под iPad това е прозорец за игра, а под iPhone може да се играе само на цял екран.
3. Когато играете, той определено ще се появи на преден план
Интерактивното видео има следните характеристики:
Под iPhone не се изисква възпроизвеждане на цял екран, може да се възпроизвежда в една област
Интерактивното видео може да се появи под обикновени графични обекти
Интерактивното видео може да има маска, така че фонът на видеото да може да бъде премахнат и видеоклипът и обикновените графични обекти да бъдат интегрирани
Резюме: За видеоклипа, използван за възпроизвеждане, ще го зададем като традиционен видеоклип. За видеоклипове, които трябва да се използват за конкретни цели, ние ги задаваме като интерактивни видеоклипове. Изследването даде предварителни резултати. Между другото, той обобщава реалните проблеми, срещани при аудио и видео разработката на мобилния H5 през следващите няколко години, и предоставя свои собствени решения. Погледнете крайния действителен ефект: съвместим с компютър (> IE9), iphone, ipad, Android 5.0
Решете проблемите с ръчно, автоматично и прозорци на iPhone и може основно се използват в действителното производство. Вдясно е оригиналният видео mp4 файл, видеото отляво заменя анимацията и след това поддържа ефекта на фоновата маска, може да разкрие основната карта и поддържа серия от интерактивни операции
H5 аудио
Всеки път, когато аудио обект се предава през ново аудио, нова нишка може да се види в IOS.
Решение: Нов аудио обект, като замества различни аудио адреси, постига целта да не отваря повече нишки.
Поддръжката не е добра за Android
Решение: Проблемът в долната версия на Android не е решен. Като цяло, смесеното развитие може да се обработи чрез коригиране на основния интерфейс, като phonegap
Не може да се възпроизведе автоматично на iphone
Решение: Автоматичното възпроизвеждане на iphone е процес, извършен при проектирането на IOS. Изглежда, че е за предотвратяване на автоматична кражба на трафик.
Просто казано, трябва да се задейства ръчно чрез симулиране на потребителя, така че трябва да извикаме тази част от кода в самото начало:
Копирайте код
// Отстранете проблема, че браузърът ios не може автоматично да възпроизвежда аудио. Създайте ново аудио при зареждане и заменете src, когато го използвате.
Xut.fix = Xut.fix || {};
ако (Xut.plat.isBrowser && Xut.plat.isIOS) {
var isAudio = невярно
var fixaudio = функция () {
if (! isAudio) {
isAudio = вярно;
Xut.fix.audio = ново аудио ();
document.removeEventListener ('touchstart', fixaudio, false);
}
};
document.addEventListener ('touchstart', fixaudio, false);
}
Копирайте горния код
Ако свържете такъв код с тялото: създайте аудио обект, като го задействате ръчно и след това го запишете в глобалния
Когато се използва, както следва:
Копирайте код
// Ако използвате Xut.fix.audio, за да посочите src за браузъра ios, моля, обърнете се към app.js за инициализация
ако (Xut.fix.audio) {
звуков
=
Xut.fix.audio;
audio.src = url;
} Още {
аудио = ново аудио (url);
}
audio.autoplay = вярно;
audio.play ();
Просто заменете аудио обекта. Най-просто казано, това трябва да е обектът, създаден от потребителския спусък за възпроизвеждане.
H5 видео аудио
Видео маркерите могат да се използват рядко на мобилния терминал, поддръжката на Android е твърде лоша, визуално 5.0 е по-добра. Старият проблем на iPhone не може да се възпроизведе автоматично (Запазване на данни, запазване на сестра ви !!!), а по подразбиране е управление на цял екран за възпроизвеждане. Дълго време игнорирах тази обработка на видео. Android използва долния слой, iPhone директно използва VideoJS, вградената светкавица и превключвателят h5, флашът също има проблеми с поддръжката. Преди малко шефът имаше търсене. Приложихме твърде много анимации, всички те бяха комбинирани анимации на спрайт маршрути, вариращи от стотици мегабайта до стотици мегабайта под едно приложение, така че има спешна нужда от решение за компресиране на изображения. Крайното решение е да се използва видео вместо анимация, тъй като технологията за компресиране на видео е разработена в продължение на много години и е много зряла. Сега технологията за видео компресия може лесно да конвертира 720P. Филми с висока разделителна способност, компресирани до 10M / min или 160K / sec. Размерът на файла на последователността на изображението е поне няколко десетки пъти по-малък. В същото време повечето устройства поддържат хардуерна декомпресия на видео, така че консумацията на процесор при възпроизвеждане на видео е много ниска, консумацията на батерията също е много ниска, а скоростта на възпроизвеждане също е бърза. Дори може да се постигне лесно възпроизвеждане на 25 кадъра на цял екран.
Планът е финализиран и няколко проблема за решаване са тук.
Цялото видео, включително някои обекти във видеото, може да реагира на потребителски кликвания, слайдове и други операции под iPhone, може да се възпроизвежда в прозорец, може да филтрира фона и може да се използва като PNG изображение. Видеото замества анимацията и след това поддържа ефекта на фоновата маска, който може да разкрие основното изображение, а също така решава проблема с ръчен, автоматичен и непълен екран
прозорци на iphone
Решение: Комбинирайте обработката чрез платно + видео тагове
Принцип: Вземете оригиналната рамка на изображението на видеоклипа и го изтеглете на страницата чрез канали
Тук директно прикачвам изходния код, кодът е написан като цяло, но подчертава няколко ключови момента
http://iwearshorts.com/blog/inline-video-on-the-iphone/
http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser
Видео вместо анимация
Това е малко тромаво. Трябва да е интерактивно и да плъзнете платното, за да постигнете целта на управлението на изображението. Още не съм завършил с писането на всичко, а общите нужди на компанията няма да имат това. Ето кратко описание, той също се обработва от canvas + video, но е необходим кеширан контейнер за платно, за да се извърши предварителна обработка. Чрез предварителната обработка вземете пикселите на всяка картина и чрез промяна на стойността на всеки пиксел RBG, той може да филтрира фона, така че да може да се използва като PNG изображение. Ще го напиша по-късно и ще го публикувам ~~
Нашата друг продукт:
