Viime aikoina tutkimme videon käyttöä animaation sijaan ja videota sprite-animaation sijaan. Kutsumme tällaista videota interaktiiviseksi videoksi.
Perinteinen sprite-animaatio: suuri levytila, hidas lataus, etenkin online-toisto, on hitaampaa
Liian monta tiedostoa, liian monta http-pyyntöä online-pelaamisen yhteydessä aiheuttaa hitaita vastauksia tai epänormaalia käyttäytymistä. Siksi on kiireellisesti kehitettävä tekniikka, jolla sprite-animaatio korvataan videolla. Kutsumme tällaista videota interaktiiviseksi videoksi
Perinteisen videon ongelmat:
1. Voidaan pelata vain neliön muotoisella alueella
2. iPadin alla se on ikkuna, jota voi toistaa, ja iPhonen alla sitä voi toistaa vain koko näytöllä.
3. Pelatessasi se näkyy ehdottomasti eturintamassa
Interaktiivisella videolla on seuraavat ominaisuudet:
IPhonen alla koko näytön toistoa ei vaadita, se voidaan toistaa yhdellä alueella
Interaktiivinen video voi näkyä tavallisten graafisten kohteiden alla
Interaktiivisella videolla voi olla peite, jotta videon tausta voidaan poistaa ja video ja tavalliset graafiset objektit voidaan integroida
Yhteenveto: Toistettavalle videolle asetamme sen perinteiseksi videoksi. Videoille, joita on käytettävä tiettyihin tarkoituksiin, asetamme ne interaktiivisiksi videoiksi. Tutkimus on tuottanut alustavia tuloksia. Muuten, siinä esitetään yhteenveto mobiililaitteen H5 ääni- ja videokehityksessä seuraavina vuosina todellisista ongelmista ja tarjotaan omat ratkaisut. Katsokaa lopullinen todellinen vaikutus: yhteensopiva PC: n (> IE9), iphone, ipad, Android 5.0 kanssa
Ratkaise manuaalisen, automaattisen ja ikkunointiin liittyvät ongelmat iPhonessa, ja se voi periaatteessa käyttää todellisessa tuotannossa Oikealla on alkuperäinen mp4-videotiedosto, vasemmalla oleva video korvaa animaation ja tukee sitten taustamaskivaikutusta, voi paljastaa peruskartan ja tukee useita vuorovaikutteisia toimintoja
H5-ääni
Joka kerta, kun ääniobjekti siirretään uuden äänen kautta, IOS: ssa näkyy uusi säie.
Ratkaisu: Uusi ääniobjekti, korvaamalla eri ääniosoitteet, saavuttaa tavoitteen olla avaamatta enemmän ketjuja.
Android-tuki ei ole hyvä
Ratkaisu: Androidin alemman version ongelmaa ei ole ratkaistu. Yleensä sekakehitys voidaan hoitaa säätämällä taustalla olevaa käyttöliittymää, kuten phonegap
Ei voida toistaa automaattisesti iPhonessa
Ratkaisu: Automaattinen toisto iPhonessa on prosessi, joka suoritetaan IOS: n suunnittelun yhteydessä. Se näyttää estävän liikenteen automaattisen varkauden.
Yksinkertaisesti sanottuna se on käynnistettävä manuaalisesti simuloimalla käyttäjää, joten meidän on kutsuttava tätä koodia heti alussa:
Kopioi koodi
// Korjaa ongelma, jonka mukaan ios-selain ei voi toistaa ääntä automaattisesti. Luo uusi ääni ladattaessa ja korvaa src, kun sitä käytetään.
Xut.fix = Xut.fix || {};
if (Xut.plat.isBrowser && Xut.plat.isIOS) {
var isAudio = väärä
var fixaudio = funktio () {
if (! onAudio) {
isAudio = tosi;
Xut.fix.audio = uusi ääni ();
document.removeEventListener ('touchstart', fixaudio, false);
}
};
document.addEventListener ('touchstart', fixaudio, false);
}
Kopioi yllä oleva koodi
Jos sidot tällaisen koodin runkoon: luo ääniobjekti käynnistämällä se manuaalisesti ja tallenna se sitten globaaliin
Käytettäessä seuraavasti:
Kopioi koodi
// Jos määrität src: n iOS-selaimelle Xut.fix.audion avulla, katso alustus sovelluksesta app.js
jos (Xut.fix.audio) {
audio-
=
Xut.fix.audio;
audio.src = url;
} Else {
audio = uusi ääni (url);
}
audio.autoplay = tosi;
audio.play ();
Korvaa vain ääniobjekti. Yksinkertaisesti sanottuna sen on oltava objekti, jonka käyttäjän laukaisu on luonut.
H5-videoääni
Videotunnisteita voidaan käyttää harvoin matkaviestimessä, Android-tuki on liian huono, visuaalisesti 5.0 on parempi. Vanhaa iPhonen ongelmaa ei voida toistaa automaattisesti (Tallenna tiedot, tallenna sisaresi !!!), ja oletusarvo on koko näytön hallinta. Jättin pitkään tätä videon käsittelyä. Android käyttää pohjakerrosta, iPhone käyttää suoraan VideoJS: ää, sisäänrakennettua salamaa ja h5-kytkintä, salamalla on myös tukiongelmia. Jokin aika sitten pomolla oli kysyntää. Sovellimme liian monta animaatiota, kaikki ne olivat yhdistettyjä animaatioita sprite-reiteistä, jotka vaihtelivat sadoista megatavuista satoihin megatavuihin yhden sovelluksen alla, joten kuvien pakkaamiseen tarvitaan kiireellinen ratkaisu. Lopullinen ratkaisu on käyttää videota animaation sijaan, koska videon pakkaustekniikkaa on kehitetty monien vuosien ajan ja se on ollut hyvin kypsä. Nyt videopakkaus tekniikka voi helposti muuntaa 720P. Teräväpiirtovideot, pakattu nopeuteen 10M / min tai 160K / s. Kuvasarjan tiedostokoko on ainakin useita kymmeniä kertoja pienempi. Samaan aikaan useimmat laitteet tukevat videolaitteiden pakkauksen purkamista niin, että videotoiston suorittimen kulutus on hyvin vähäistä, akun kulutus on myös hyvin alhainen ja toistonopeus on myös nopea. Jopa 25 ruudun koko näytön toisto voidaan helposti saavuttaa.
Suunnitelma on viimeistelty, ja täällä on useita ratkaistavia ongelmia.
Koko video, mukaan lukien jotkut videon esineet, voi vastata käyttäjien napsautuksiin, dioihin ja muihin toimiin iPhonen alla, se voidaan toistaa ikkunassa, se voi suodattaa taustan ja käyttää PNG-kuvan tavoin. Video korvaa animaation ja tukee sitten taustamaskivaikutusta, joka voi paljastaa peruskuvan ja ratkaisee myös manuaalisen, automaattisen ja keskeneräisen näytön ongelman
iphone ikkuna
Ratkaisu: Yhdistä käsittely kankaalle + videotunnisteiden avulla
Periaate: Hanki videon alkuperäinen kuvakehys ja vedä se sivulle sävyjen kautta
Täällä liitän suoraan lähdekoodin, koodi kirjoitetaan yleensä, mutta korostaa muutaman avainkohdan
http://iwearshorts.com/blog/inline-video-on-the-iphone/
http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser
Video animaation sijaan
Tämä on vähän hankalaa. Sen on oltava interaktiivinen ja vedettävä kangasta kuvan hallinnan tavoitteen saavuttamiseksi. En ole vielä kirjoittanut kaikkea sitä, eikä yrityksen yleisillä tarpeilla ole tätä. Tässä on lyhyt kuvaus, se käsitellään myös kankaalla + videolla, mutta välimuistissa oleva kanvasäiliö vaaditaan esikäsittelyä varten. Hanki esikäsittelyn avulla kunkin kuvan pikselit ja muuttamalla kunkin pikselin RBG: n arvoa se voi suodattaa taustan, jotta sitä voidaan käyttää kuten PNG-kuvaa. Kirjoitan sen myöhemmin ja julkaisen sen ~~
Meidän muiden tuotteiden:
