У апошні час мы вывучаем выкарыстанне відэа замест анімацыі і відэа замест спрайтавай анімацыі. Мы называем гэты від відэа інтэрактыўным відэа.
Традыцыйная анімацыя спрайтаў: вялікая прастора на дыску, павольная загрузка, асабліва онлайн-прайграванне, будзе павольней
Занадта шмат файлаў, занадта шмат HTTP-запытаў пры прайграванні ў Інтэрнэце прывядзе да павольнай рэакцыі альбо ненармальных паводзін. Такім чынам, існуе тэрміновая неабходнасць у распрацоўцы набору тэхналогій для замены спрайтавай анімацыі на відэа. Мы называем гэты від відэа інтэрактыўным відэа
Праблемы з традыцыйным відэа:
1. Можна гуляць толькі ў квадратнай форме
2. Пад iPad гэта акно для прайгравання, а пад iPhone яно можа прайгравацца толькі ў поўнаэкранным рэжыме.
3. Пры гульні ён дакладна з'явіцца на пярэднім краі
Інтэрактыўнае відэа мае наступныя характарыстыкі:
Пад iPhone поўнаэкраннае прайграванне не патрабуецца, яго можна прайграваць у адной вобласці
Інтэрактыўнае відэа можа з'яўляцца пад звычайнымі графічнымі аб'ектамі
Інтэрактыўнае відэа можа мець маску, так што фон відэа можа быць выдалены і відэа і звычайныя графічныя аб'екты могуць быць інтэграваны
Асноўная інфармацыя: Для відэа, якое выкарыстоўваецца для прайгравання, мы ўсталюем яго як традыцыйнае відэа. Для відэаролікаў, якія неабходна выкарыстоўваць у пэўных мэтах, мы ўсталёўваем іх як інтэрактыўныя відэаролікі. Даследаванне дало папярэднія вынікі. Дарэчы, ён абагульняе рэальныя праблемы, якія ўзнікнуць пры распрацоўцы аўдыё і відэа мабільнага H5 у бліжэйшыя некалькі гадоў, і дае ўласныя рашэнні. Зірніце на канчатковы фактычны эфект: сумяшчальны з ПК (> IE9), iphone, ipad, Android 5.0
Вырашыце праблемы ручнога, аўтаматычнага і аконнага прагляду на iPhone, і гэта магчыма у асноўным выкарыстоўваецца ў рэальнай вытворчасці. Справа размешчаны арыгінальны файл mp4 з відэа, відэа злева замяняе анімацыю, а затым падтрымлівае эфект фонавай маскі, можа выявіць базавую карту і падтрымлівае шэраг інтэрактыўных аперацый
H5 аўдыя
Кожны раз, калі аўдыя-аб'ект праходзіць праз новы аўдыя, на IOS можна ўбачыць новую ланцужок.
Рашэнне: Новы аўдыя-аб'ект, замяняючы розныя гукавыя адрасы, дасягае мэты не адкрываць больш патокаў.
Падтрымка дрэнная на Android
Рашэнне: Праблема ніжняй версіі Android не вырашана. Як правіла, змяшаная распрацоўка можа быць ажыццёўлена шляхам наладжвання асноўнага інтэрфейсу, напрыклад, фонегапа
Немагчыма аўтаматычна прайграць на iphone
Рашэнне: Аўтаматычнае прайграванне на iphone - гэта працэс, які быў распрацаваны пры распрацоўцы IOS. Падобна на тое, каб прадухіліць аўтаматычны крадзеж руху.
Прасцей кажучы, яго трэба запускаць уручную, імітуючы карыстальніка, таму нам трэба выклікаць гэты фрагмент кода ў самым пачатку:
Скапіруйце код
// Выправіць праблему, дзякуючы якой браўзэр ios не можа аўтаматычна прайграваць аўдыя. Стварыце новы аўдыя пры загрузцы і заменіце src пры яго выкарыстанні.
Xut.fix = Xut.fix || {};
калі (Xut.plat.isBrowser && Xut.plat.isIOS) {
var isAudio = ілжыва
var fixaudio = function () {
калі (! isAudio) {
isAudio = праўда;
Xut.fix.audio = новы аўдыя ();
document.removeEventListener ('сэнсарны старт', fixaudio, ілжыва);
}
};
document.addEventListener ('сэнсарны старт', fixaudio, ілжыва);
}
Скапіруйце прыведзены вышэй код
Калі вы прывязваеце такі код да цела: стварыце гукавы аб'ект, уключыўшы яго ўручную, а затым захавайце ў глабальным
Пры выкарыстанні наступным чынам:
Скапіруйце код
// Калі вы выкарыстоўваеце 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. Фільмы высокай выразнасці, сціснутыя да 10 М / мін або 160 К / с. Памер файла ў паслядоўнасці малюнкаў як мінімум у некалькі дзясяткаў разоў меншы. У той жа час большасць прылад падтрымлівае апаратную дэкампрэсію відэа, так што спажыванне працэсара пры прайграванні відэа вельмі нізкае, расход батарэі таксама вельмі нізкі, а хуткасць прайгравання таксама хуткая. Нават поўнаэкраннае прайграванне 25 кадраў можа быць лёгка дасягнута.
План дапрацаваны, і тут ёсць некалькі праблем, якія трэба вырашыць.
Усё відэа, уключаючы некаторыя аб'екты ў відэа, можа рэагаваць на клікі карыстальніка, слайды і іншыя аперацыі пад iPhone, прайгравацца ў акне, адфільтроўваць фон і выкарыстоўвацца як выява PNG. Відэа замяняе анімацыю, а затым падтрымлівае эфект фонавай маскі, які можа выявіць базавы малюнак, а таксама вырашае праблему ручнога, аўтаматычнага і няпоўнага экрана
аконнае айфон
Рашэнне: Аб'яднайце апрацоўку праз палатно + відэатэгі
Прынцып: Атрымайце арыгінальны кадр выявы відэа і намалюйце яго на старонцы праз каналы
Тут я непасрэдна далучаю зыходны код, код напісаны ў цэлым, але вылучае некалькі ключавых момантаў
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-малюнак. Я напішу гэта пазней і апублікую ~~
Наш іншы прадукт:
