Nesen mēs pētām video izmantošanu animācijas vietā un video sprite animācijas vietā. Šādu video mēs saucam par interaktīvu video.
Tradicionālā sprite animācija: liela vieta diskā, lēna lejupielāde, īpaši atskaņošana tiešsaistē, būs lēnāka
Pārāk daudz failu, pārāk daudz http pieprasījumu, spēlējot tiešsaistē, izraisīs lēnu atbildi vai neparastu uzvedību. Tāpēc ir steidzami jāizstrādā tehnoloģiju kopums, lai sprite animāciju aizstātu ar video. Mēs šāda veida video saucam par interaktīvu video
Problēmas ar tradicionālo video:
1. Var spēlēt tikai kvadrātveida formā
2. Zem iPad ir atskaņošanas logs, un zem iPhone to var atskaņot tikai pilnekrāna režīmā.
3. Spēlējot, tas noteikti parādīsies priekšplānā
Interaktīvajam videoklipam ir šādas īpašības:
Saskaņā ar iPhone pilna ekrāna atskaņošana nav nepieciešama, to var atskaņot vienā apgabalā
Interaktīvs video var parādīties zem parastajiem grafiskajiem objektiem
Interaktīvajam videoklipam var būt maska, lai varētu noņemt video fonu un integrēt video un parastos grafiskos objektus
Kopsavilkums: Videoklipam, ko izmanto atskaņošanai, mēs to iestatīsim kā tradicionālu videoklipu. Videoklipiem, kas jāizmanto īpašiem mērķiem, mēs tos iestatām kā interaktīvus videoklipus. Pētījums ir devis provizoriskus rezultātus. Starp citu, tajā ir apkopotas faktiskās problēmas, kas radušās mobilā H5 audio un video izstrādē tuvāko gadu laikā, un sniegti savi risinājumi. Apskatiet galīgo faktisko efektu: savietojams ar datoru (> IE9), iphone, ipad, Android 5.0
Atrisiniet manuālās, automātiskās un logu problēmas iPhone tālrunī, un tas var galvenokārt izmantot faktiskajā ražošanā. Pa labi ir oriģināls video mp4 fails, kreisajā pusē esošais video aizstāj animāciju un pēc tam atbalsta fona maskas efektu, var atklāt bāzes karti un atbalsta virkni interaktīvu darbību
H5 audio
Katru reizi, kad audio objekts tiek izlaists caur jaunu audio, IOS var redzēt jaunu pavedienu.
Risinājums: jauns audio objekts, aizstājot dažādas audio adreses, sasniedz mērķi neatvērt vairāk pavedienu.
Android operētājsistēmā atbalsts nav labs
Risinājums: problēma ar Android zemāko versiju nav atrisināta. Parasti jauktu attīstību var veikt, pielāgojot pamatā esošo saskarni, piemēram, phonegap
Nevar automātiski atskaņot iPhone tālrunī
Risinājums: Automātiska atskaņošana iPhone tālrunī ir process, kas tiek veikts, izstrādājot IOS. Šķiet, ka tas novērš automātisku satiksmes zādzību.
Vienkārši sakot, tas jāaktivizē manuāli, simulējot lietotāju, tāpēc mums ir jāsauc šis koda gabals pašā sākumā:
Kopēt kodu
// Novērsiet problēmu, ka ios pārlūks nevar automātiski atskaņot audio. Kad ielādējat, izveidojiet jaunu audio un, lietojot to, nomainiet src.
Xut.fix = Xut.fix || {};
ja (Xut.plat.isBrowser && Xut.plat.isIOS) {
var isAudio = nepatiess
var fixaudio = function () {
ja (! isAudio) {
isAudio = patiess;
Xut.fix.audio = new Audio ();
document.removeEventListener ('touchstart', fixaudio, false);
}
};
document.addEventListener ('touchstart', fixaudio, false);
}
Kopējiet kodu iepriekš
Ja saistāt šādu kodu ar pamattekstu: izveidojiet audio objektu, manuāli iedarbinot to, un pēc tam saglabājiet to globālajā
Lietojot šādi:
Kopēt kodu
// Ja izmantojat Xut.fix.audio, lai norādītu src ios pārlūkam, inicializēšanai, lūdzu, skatiet vietni app.js
ja (Xut.fix.audio) {
Audio
=
Xut.fix.audio;
audio.src = url;
} Vēl {
audio = jauns audio (url);
}
audio.autoplay = taisnība;
audio.play ();
Vienkārši nomainiet audio objektu. Vienkārši sakot, tam jābūt objektam, ko izveidojis lietotāja aktivizētājs, lai spēlētu.
H5 video audio
Video tagus mobilajā terminālī var izmantot reti, Android atbalsts ir pārāk slikts, vizuāli 5.0 ir labāks. IPhone veco problēmu nevar automātiski atskaņot (Saglabājiet datus, saglabājiet māsu !!!), un noklusējums ir pilna ekrāna vadība, lai atskaņotu. Ilgu laiku es ignorēju šo video apstrādi. Android izmanto apakšējo slāni, iPhone tieši izmanto VideoJS, iebūvēto zibspuldzi un h5 slēdzi, zibspuldzei ir arī atbalsta problēmas. Pirms kāda laika priekšniekam bija prasība. Mēs izmantojām pārāk daudz animāciju, tās visas bija apvienotas sprite maršrutu animācijas, sākot no simtiem megabaitiem līdz simtiem megabaitu vienā lietotnē, tāpēc steidzami nepieciešams risinājums attēlu saspiešanai. Galīgais risinājums ir izmantot animāciju vietā video, jo video saspiešanas tehnoloģija ir izstrādāta daudzus gadus un ir bijusi ļoti nobriedusi. Tagad video saspiešanas tehnoloģija var viegli pārveidot 720P. Augstas izšķirtspējas filmas, saspiestas līdz 10M / min vai 160K / s. Attēlu secības faila izmērs ir vismaz vairākas desmit reizes mazāks. Tajā pašā laikā lielākā daļa ierīču atbalsta video aparatūras dekompresiju, tāpēc video atskaņošanas procesora patēriņš ir ļoti mazs, arī akumulatora patēriņš ir ļoti mazs, un arī atskaņošanas ātrums ir ātrs. Vienkārši var panākt 25 kadru pilnekrāna atskaņošanu.
Plāns ir pabeigts, un šeit ir vairākas problēmas, kas jāatrisina.
Viss videoklips, ieskaitot dažus video objektus, var reaģēt uz lietotāju klikšķiem, slaidiem un citām darbībām zem iPhone, to var atskaņot logā, var filtrēt fonu un to var izmantot kā PNG attēlu. Video aizstāj animāciju un pēc tam atbalsta fona maskas efektu, kas var atklāt bāzes attēlu, kā arī atrisina manuāla, automātiska un nepilnīga ekrāna problēmu
iphone logi
Risinājums: apvienojiet apstrādi, izmantojot audekls + video tagus
Princips: Iegūstiet videoklipa oriģinālo attēla rāmi un, izmantojot kanavas, pavelciet to uz lapu
Šeit es tieši pievienoju pirmkodu, kods ir rakstīts kopumā, bet izceļ dažus galvenos punktus
http://iwearshorts.com/blog/inline-video-on-the-iphone/
http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser
Video, nevis animācija
Tas ir mazliet apgrūtinoši. Tam jābūt interaktīvam un jāvelk audekls, lai sasniegtu attēla vadības mērķi. Es to visu vēl neesmu pabeidzis rakstīt, un uzņēmuma vispārējām vajadzībām to nebūs. Šeit ir īss apraksts, to apstrādā arī audekls + video, taču priekšapstrādes veikšanai ir nepieciešams kešatmiņā saglabāts audekla konteiners. Veicot pirmapstrādi, iegūstiet katra attēla pikseļus, un, mainot katra pikseļa RBG vērtību, tas var filtrēt fonu, lai to varētu izmantot kā PNG attēlu. Es to uzrakstīšu vēlāk un publicēšu ~~
citu mūsu produktu:
