Onlangs bestudeer ons die gebruik van video in plaas van animasie en video in plaas van sprite-animasie. Ons noem hierdie soort video interaktiewe video.
Tradisionele sprite-animasie: groot skyfspasie, stadige aflaai, veral aanlyn afspeel, sal stadiger wees
Te veel lêers, te veel http-versoeke as u aanlyn speel, sal stadige reaksie of abnormale gedrag veroorsaak. Daarom is daar 'n dringende behoefte om 'n stel tegnologieë te ontwikkel om sprite-animasie deur video te vervang. Ons noem hierdie soort video 'n interaktiewe video
Probleme met tradisionele video's:
1. Kan slegs in 'n vierkantige vorm gespeel word
2. Onder die iPad is dit 'n venster om te speel, en onder die iPhone kan dit slegs op die volle skerm gespeel word.
3. As u speel, sal dit beslis op die voorpunt verskyn
Interaktiewe video het die volgende kenmerke:
Onder die iPhone is volle skerm nie nodig nie, dit kan in een gebied gespeel word
Interaktiewe video kan onder gewone grafiese voorwerpe verskyn
Interaktiewe video kan 'n masker hê, sodat die agtergrond van die video verwyder kan word en die video en gewone grafiese voorwerpe geïntegreer kan word
opsomming: Vir die video wat gebruik word om te speel, sal ons dit as 'n tradisionele video stel. Vir video's wat vir spesifieke doeleindes gebruik moet word, stel ons dit as interaktiewe video's. Die navorsing het voorlopige resultate opgelewer. Terloops, dit som die werklike probleme op wat tydens die klank- en video-ontwikkeling van die mobiele H5 in die volgende paar jaar ondervind is, en bied sy eie oplossings. Kyk na die finale werklike effek: versoenbaar met PC (> IE9), iPhone, iPad, Android 5.0
Los die probleme met die handmatige, outomatiese en venstervenster op die iPhone op, en dit kan basies gebruik word in werklike produksie. Aan die regterkant is die oorspronklike video mp4-lêer, die video aan die linkerkant vervang die animasie en ondersteun dan die agtergrondmasker-effek, kan die basiskaart openbaar en ondersteun 'n reeks interaktiewe bewerkings
H5-klank
Elke keer as 'n klankvoorwerp deur nuwe klank gestuur word, kan 'n nuwe draad op IOS gesien word.
Oplossing: 'n Nuwe Audio-voorwerp, deur verskillende klankadresse te vervang, bereik die doel om nie meer drade oop te maak nie.
Ondersteuning is nie goed op Android nie
Oplossing: Die probleem in die onderste weergawe van Android is nie opgelos nie. Oor die algemeen kan gemengde ontwikkeling hanteer word deur die onderliggende koppelvlak, soos phonegap, aan te pas
Kan nie outomaties op die iPhone speel nie
Oplossing: Outomatiese afspeel op die iPhone is 'n proses wat gedoen is toe IOS ontwerp is. Dit lyk asof dit outomatiese diefstal van verkeer voorkom.
Eenvoudig gestel, dit moet handmatig geaktiveer word deur die gebruiker te simuleer, daarom moet ons hierdie stuk kode heel aan die begin noem:
Kopieer kode
// Los die probleem op dat die ios-blaaier nie outomaties klank kan speel nie. Skep nuwe klank tydens laai en vervang src wanneer u dit gebruik.
Xut.fix = Xut.fix || {};
as (Xut.plat.isBrowser && Xut.plat.isIOS) {
var isAudio = vals
var fixaudio = funksie () {
as (! isAudio) {
isAudio = waar;
Xut.fix.audio = nuwe klank ();
document.removeEventListener ('touchstart', fixaudio, vals);
}
};
document.addEventListener ('touchstart', fixaudio, false);
}
Kopieer die kode hierbo
As u so 'n kode aan die liggaam bind: skep 'n klankvoorwerp deur dit handmatig te aktiveer en stoor dit dan in die globale
As dit soos volg gebruik word:
Kopieer kode
// As u Xut.fix.audio gebruik om src vir ios-blaaier te spesifiseer, verwys asseblief na app.js vir initialisering
as (Xut.fix.audio) {
klank
=
Xut.fix.oudio;
oudio.src = url;
} Else {
klank = nuwe klank (url);
}
audio.autoplay = waar;
audio.play ();
Vervang eenvoudig die klankvoorwerp. Eenvoudig gestel, dit moet die voorwerp wees wat deur die sneller van die gebruiker geskep is om te speel.
H5-video-klank
Videotags kan selde op die mobiele terminale gebruik word, Android-ondersteuning is te sleg, visueel is 5.0 beter. Die ou probleem op die iPhone kan nie outomaties gespeel word nie (stoor data, stoor jou suster !!!), en die standaard is om die skerm te beheer. Ek het hierdie video-verwerking lankal geïgnoreer. Android gebruik die onderste laag, iPhone gebruik direk VideoJS, die ingeboude flits en h5-skakelaar, flits het ook ondersteuningsprobleme. 'N Ruk gelede het die baas 'n eis gehad. Ons het te veel animasies toegepas, almal was gekombineerde animasies van sprite-roetes, wat wissel van honderde megagrepe tot honderde megagrepe onder een app, dus daar is 'n dringende behoefte aan 'n oplossing om beelde saam te pers. Die finale oplossing is om video in plaas van animasie te gebruik, omdat videokompressietegnologie al baie jare ontwikkel is en baie volwasse is. Nou kan videokompressietegnologie maklik 720P omskakel. Hoë-definisie-films, saamgepers tot 10M / min, of 160K / sek. Die lêergrootte van die beeldreeks is minstens tien keer minder. Terselfdertyd ondersteun die meeste toestelle hardeware-dekompressie van video, sodat die SVE-verbruik van video-afspeel baie laag is, die batteryverbruik ook baie laag is en die afspeelsnelheid ook vinnig is. Selfs die volle skerm kan 25 rame afspeel.
Die plan is afgehandel en daar is verskeie probleme wat opgelos moet word.
Die hele video, insluitend sommige voorwerpe in die video, kan reageer op gebruikerskliek, skyfies en ander bewerkings onder die iPhone, kan in 'n venster gespeel word, kan die agtergrond uitfilter en kan soos 'n PNG-beeld gebruik word. Die video vervang die animasie en ondersteun dan die agtergrondmasker-effek, wat die basisbeeld kan openbaar, en ook die probleem van die handleiding, outomatiese en onvolledige skerm oplos
iPhone-venster
Oplossing: kombineer verwerking deur canvas + video tags
Beginsel: Kry die oorspronklike beeldraamwerk van die video en teken dit na die bladsy deur canavs
Hier heg ek die bronkode direk aan, die kode word in die algemeen geskryf, maar lig 'n paar belangrike punte uit
http://iwearshorts.com/blog/inline-video-on-the-iphone/
http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser
Video in plaas van animasie
Dit is 'n bietjie omslagtig. Dit moet interaktief wees en die doek sleep om die doel te bereik om die beeld te beheer. Ek het dit nog nie klaar geskryf nie, en die algemene behoeftes van die maatskappy sal dit nie hê nie. Hier is 'n kort beskrywing, dit word ook deur canvas + video verwerk, maar 'n cache seilhouer is nodig om vooraf te verwerk. Kry die pixels van elke prentjie deur vooraf te verwerk, en deur die waarde van elke pixel-RBG te verander, kan dit die agtergrond filter, sodat dit soos 'n PNG-beeld gebruik kan word. Ek sal dit later skryf en publiseer ~ ~
Ons ander produk:
