Kamakailan lamang, pinag-aaralan namin ang paggamit ng video sa halip na animasyon at video sa halip na sprite na animasyon. Tinatawag namin ang ganitong uri ng video interactive video.
Tradisyunal na animasyon ng sprite: malaking puwang ng disk, mabagal na pag-download, lalo na ang pag-playback sa online, ay magiging mas mabagal
Napakaraming mga file, masyadong maraming mga kahilingan sa http kapag naglalaro ng online, ay magdudulot ng mabagal na tugon o abnormal na pag-uugali. Samakatuwid, mayroong isang kagyat na pangangailangan na bumuo ng isang hanay ng teknolohiya upang mapalitan ang sprite na animasyon sa video. Tinatawag namin ang ganitong uri ng video na isang interactive na video
Mga problema sa tradisyunal na video:
1. Maaari lamang i-play sa isang parisukat na lugar
2. Sa ilalim ng iPad, ito ay isang window upang i-play, at sa ilalim ng iPhone, maaari lamang itong i-play sa buong screen.
3. Kapag naglalaro, tiyak na lilitaw ito sa unahan
Ang mga interactive na video ay may mga sumusunod na katangian:
Sa ilalim ng iPhone, hindi kinakailangan ang pag-playback ng buong screen, maaari itong i-play sa isang lugar
Maaaring lumitaw ang interactive na video sa ibaba ng ordinaryong mga graphic object
Maaaring magkaroon ng mask ang interactive na video, upang ang background ng video ay maalis at ang video at mga ordinaryong graphic na bagay ay maaaring isama
buod: Para sa video na ginamit sa pag-play, itatakda namin ito bilang isang tradisyonal na video. Para sa mga video na kailangang gamitin para sa mga tukoy na layunin, itinakda namin ang mga ito bilang mga interactive na video. Ang pananaliksik ay nagbigay ng paunang mga resulta. Sa pamamagitan ng paraan, binubuod nito ang aktwal na mga problemang nakasalamuha sa pag-unlad ng audio at video ng mobile H5 sa susunod na ilang taon at nagbibigay ng sarili nitong mga solusyon. Tingnan ang pangwakas na aktwal na epekto: katugma sa PC (> IE9), iphone, ipad, Android 5.0
Malutas ang mga problema sa manu-manong, awtomatiko, at windowing sa iPhone, at magagawa ito karaniwang ginagamit sa aktwal na paggawa. Sa kanan ay ang orihinal na file ng mp4 video, ang video sa kaliwa ay pinapalitan ang animasyon, at pagkatapos ay sinusuportahan ang background mask na epekto, maaaring ipakita ang base map, at suportahan ang isang serye ng mga interactive na operasyon
H5 na audio
Sa tuwing ang isang audio object ay naipapasa sa bagong Audio, ang isang bagong thread ay makikita sa IOS.
Solusyon: Ang isang bagong object ng Audio, sa pamamagitan ng pagpapalit ng iba't ibang mga audio address, nakakamit ang layunin na hindi magbukas ng maraming mga thread.
Hindi maganda ang suporta sa Android
Solusyon: Ang problema sa mas mababang bersyon ng Android ay hindi malulutas. Sa pangkalahatan, ang halo-halong pag-unlad ay maaaring mapangasiwaan sa pamamagitan ng pag-aayos ng pinagbabatayan na interface, tulad ng phonegap
Hindi ma-auto-play sa iphone
Solusyon: Ang awtomatikong pag-playback sa iphone ay isang proseso na nagawa nang idisenyo ang IOS. Tila upang maiwasan ang awtomatikong pagnanakaw ng trapiko.
Sa madaling salita, kailangan itong ma-trigger nang manu-mano sa pamamagitan ng pagtulad sa gumagamit, kaya kailangan naming tawagan ang piraso ng code na ito sa simula pa lamang:
Kopyahin ang code
// Ayusin ang problema na ang ios browser ay hindi maaaring awtomatikong maglaro ng audio. Lumikha ng bagong audio kapag naglo-load at palitan ang src kapag ginagamit ito.
Xut.fix = Xut.fix || {};
kung (Xut.plat.isBrowser && Xut.plat.isIOS) {
var isAudio = false
var fixaudio = function () {
kung (! isAudio) {
isAudio = totoo;
Xut.fix.audio = bagong Audio ();
document.removeEventListener ('touchstart', fixaudio, false);
}
};
document.addEventListener ('touchstart', fixaudio, false);
}
Kopyahin ang code sa itaas
Kung tinali mo ang naturang code sa katawan: lumikha ng isang audio object sa pamamagitan ng manu-manong pag-trigger nito, at pagkatapos ay i-save ito sa pandaigdigang
Kapag ginamit tulad ng sumusunod:
Kopyahin ang code
// Kung gagamitin mo ang Xut.fix.audio upang tukuyin ang src para sa ios browser, mangyaring sumangguni sa app.js para sa pagsisimula
kung (Xut.fix.audio) {
audio
=
Xut.fix.audio;
audio.src = url;
} Iba pa {
audio = bagong Audio (url);
}
audio.autoplay = totoo;
audio.play ();
Palitan lamang ang audio object. Sa madaling salita, dapat ito ang bagay na nilikha ng pag-trigger ng gumagamit upang i-play.
Audio audio ng H5
Ang mga tag ng video ay maaaring bihirang gamitin sa mobile terminal, ang suporta sa Android ay masyadong masama, ang visual na 5.0 ay mas mahusay. Ang lumang problema sa iPhone ay hindi maaaring awtomatikong i-play (I-save ang data, i-save ang iyong kapatid !!!), at ang default ay ang full-screen control upang i-play. Sa mahabang panahon, hindi ko pinansin ang pagproseso ng video na ito. Gumagamit ang Android sa ilalim na layer, direktang gumagamit ang iPhone ng VideoJS, ang built-in na flash at h5 switch, ang flash ay mayroon ding mga problema sa suporta. Kanina lang, may demand ang boss. Nag-apply kami ng napakaraming mga animasyon, lahat ng ito ay pinagsamang mga animasyon ng mga ruta ng sprite, mula sa daan-daang mga megabyte hanggang daan-daang mga megabyte sa ilalim ng isang app, kaya't may kagyat na pangangailangan para sa isang solusyon upang ma-compress ang mga imahe. Ang pangwakas na solusyon ay ang paggamit ng video sa halip na animasyon, dahil ang teknolohiya ng compression ng video ay binuo sa loob ng maraming taon at naging napaka-mature. Ngayon ang teknolohiya ng compression ng video ay maaaring madaling i-convert ang 720P. Mga pelikulang may mataas na kahulugan, naka-compress sa 10M / min, o 160K / sec. Ang laki ng file ng pagkakasunud-sunod ng imahe ay hindi bababa sa maraming sampu ng beses na mas maliit. Sa parehong oras, sinusuportahan ng karamihan sa mga aparato ang pagbawas ng hardware ng video, upang ang pagkonsumo ng CPU ng pag-playback ng video ay napakababa, ang pagkonsumo ng baterya ay napakababa din, at ang bilis ng pag-playback ay mabilis din. Kahit na ang full-screen na pag-playback ng 25 mga frame ay maaaring madaling makamit.
Natapos ang plano, at maraming mga problemang malulutas ang narito.
Ang buong video, kabilang ang ilang mga bagay sa video, ay maaaring tumugon sa mga pag-click ng gumagamit, mga slide at iba pang mga operasyon sa ilalim ng iPhone, maaaring i-play sa isang window, maaaring i-filter ang background, at maaaring magamit tulad ng isang PNG na imahe. Pinalitan ng video ang animasyon, at sinusuportahan ang background mask na epekto, na maaaring ipakita ang pangunahing imahe, at malulutas din ang problema ng manu-manong, awtomatiko, at hindi kumpletong screen
window ng iphone
Solusyon: Pagsamahin ang pagproseso sa pamamagitan ng mga tag ng canvas + video
Prinsipyo: Kunin ang orihinal na frame ng imahe ng video at iguhit ito sa pahina sa pamamagitan ng mga canav
Dito ko direktang ikinakabit ang source code, ang code ay nakasulat sa pangkalahatan, ngunit nagha-highlight ng ilang mga pangunahing punto
http://iwearshorts.com/blog/inline-video-on-the-iphone/
http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser
Video sa halip na animasyon
Medyo masalimuot ito. Kailangan itong maging interactive at i-drag ang canvas upang makamit ang layunin ng pagkontrol sa imahe. Hindi ko pa natatapos ang pagsusulat ng lahat ng ito, at ang pangkalahatang mga pangangailangan ng kumpanya ay hindi magkakaroon nito. Narito ang isang maikling paglalarawan, pinoproseso din ito ng canvas + video, ngunit kinakailangan ang isang naka-cache na lalagyan ng canvas upang makagawa ng isang preprocessing. Sa pamamagitan ng preprocessing, kunin ang mga pixel ng bawat larawan, at sa pamamagitan ng pagbabago ng halaga ng bawat pixel RBG, maaari nitong mai-filter ang background, upang magamit ito tulad ng isang PNG na imahe. Susulat ko ito mamaya at ilathala ito ~~
Ang aming iba pang mga produkto:
