Recentemente, stiamo studiando l'uso del video invece dell'animazione e del video invece dell'animazione sprite. Chiamiamo questo tipo di video video interattivo.
Animazione sprite tradizionale: ampio spazio su disco, download lento, soprattutto riproduzione online, sarà più lento
Troppi file, troppe richieste http durante la riproduzione online, causeranno una risposta lenta o un comportamento anomalo. Pertanto, vi è un'urgente necessità di sviluppare una serie di tecnologie per sostituire l'animazione dello sprite con il video. Chiamiamo questo tipo di video un video interattivo
Problemi con il video tradizionale:
1. Può essere giocato solo in un'area di forma quadrata
2. Sotto l'iPad, è una finestra per giocare, e sotto l'iPhone, può essere riprodotto solo a schermo intero.
3. Durante la riproduzione, apparirà sicuramente in prima linea
Il video interattivo ha le seguenti caratteristiche:
Sotto l'iPhone, la riproduzione a schermo intero non è richiesta, può essere riprodotta in un'area
Il video interattivo può apparire sotto i normali oggetti grafici
Il video interattivo può avere una maschera, in modo che lo sfondo del video possa essere rimosso e il video e gli oggetti grafici ordinari possano essere integrati
Sommario: Per il video utilizzato per la riproduzione, lo imposteremo come un video tradizionale. Per i video che devono essere utilizzati per scopi specifici, li impostiamo come video interattivi. La ricerca ha prodotto risultati preliminari. A proposito, riassume i problemi reali incontrati nello sviluppo audio e video del cellulare H5 nei prossimi anni e fornisce le proprie soluzioni. Dai un'occhiata all'effetto finale: compatibile con PC (>IE9), iphone, ipad, Android 5.0
Risolvi i problemi di manuale, automatico e windowing su iPhone e può fondamentalmente essere utilizzato nella produzione effettiva. A destra c'è il file video mp4 originale, il video a sinistra sostituisce l'animazione, quindi supporta l'effetto maschera di sfondo, può rivelare la mappa di base e supporta una serie di operazioni interattive
Audio H5
Ogni volta che un oggetto audio viene passato attraverso un nuovo audio, un nuovo thread può essere visto su IOS.
Soluzione: un nuovo oggetto Audio, sostituendo diversi indirizzi audio, raggiunge l'obiettivo di non aprire più thread.
Il supporto non è buono su Android
Soluzione: il problema sulla versione inferiore di Android non è stato risolto. In genere, lo sviluppo misto può essere gestito regolando l'interfaccia sottostante, come phonegap
Impossibile riprodurre automaticamente su iPhone
Soluzione: la riproduzione automatica su iPhone è un processo eseguito quando è stato progettato IOS. Sembra che serva a prevenire il furto automatico del traffico.
In poche parole, deve essere attivato manualmente simulando l'utente, quindi dobbiamo chiamare questo pezzo di codice all'inizio:
Copia codice
// Risolve il problema che il browser ios non può riprodurre automaticamente l'audio. Crea nuovo audio durante il caricamento e sostituisci src quando lo usi.
Xut.fix = Xut.fix || {};
if (Xut.plat.isBrowser && Xut.plat.isIOS) {
var isAudio = falso
var fixaudio = function () {
if (! isAudio) {
isAudio = vero;
Xut.fix.audio = nuovo audio ();
document.removeEventListener ('touchstart', fixaudio, false);
}
};
document.addEventListener ('touchstart', fixaudio, false);
}
Copia il codice sopra
Se leghi un codice di questo tipo al corpo: crea un oggetto audio attivandolo manualmente, quindi salvalo nel file globale
Se utilizzato come segue:
Copia codice
// Se usi Xut.fix.audio per specificare src per il browser ios, fai riferimento a app.js per l'inizializzazione
se (Xut.fix.audio) {
Audio
=
Xut.fix.audio;
audio.src = URL;
} Else {
audio = nuovo audio (url);
}
audio.autoplay = vero;
audio.play ();
Sostituisci semplicemente l'oggetto audio. In poche parole, deve essere l'oggetto creato dal trigger dell'utente per giocare.
Audio video H5
I tag video possono essere usati raramente sul terminale mobile, il supporto Android è un peccato, visivamente 5.0 è migliore. Il vecchio problema su iPhone non può essere riprodotto automaticamente (Salva dati, salva tua sorella !!!) e l'impostazione predefinita è il controllo a schermo intero per giocare. Per molto tempo ho ignorato questa elaborazione video. Android utilizza lo strato inferiore, iPhone utilizza direttamente VideoJS, il flash integrato e l'interruttore h5, il flash ha anche problemi di supporto. Qualche tempo fa, il capo aveva una richiesta. Abbiamo applicato troppe animazioni, tutte erano animazioni combinate di percorsi sprite, che andavano da centinaia di megabyte a centinaia di megabyte sotto un'unica app, quindi c'è urgente bisogno di una soluzione per comprimere le immagini. La soluzione finale è usare il video invece dell'animazione, perché la tecnologia di compressione video è stata sviluppata per molti anni ed è stata molto matura. Ora la tecnologia di compressione video può convertire facilmente 720P. Filmati ad alta definizione, compressi a 10 M / min o 160 K / sec. La dimensione del file della sequenza di immagini è almeno diverse decine di volte inferiore. Allo stesso tempo, la maggior parte dei dispositivi supporta la decompressione hardware del video, in modo che il consumo della CPU per la riproduzione video sia molto basso, anche il consumo della batteria sia molto basso e anche la velocità di riproduzione sia veloce. Anche la riproduzione a schermo intero di 25 fotogrammi può essere facilmente ottenuta.
Il piano è finalizzato e diversi problemi da risolvere sono qui.
L'intero video, inclusi alcuni oggetti nel video, può rispondere ai clic dell'utente, alle diapositive e ad altre operazioni sotto l'iPhone, può essere riprodotto in una finestra, può filtrare lo sfondo e può essere utilizzato come un'immagine PNG. Il video sostituisce l'animazione e quindi supporta l'effetto maschera di sfondo, che può rivelare l'immagine di base e risolve anche il problema dello schermo manuale, automatico e incompleto
finestre di iPhone
Soluzione: combina l'elaborazione tramite canvas + tag video
Principio: ottieni il frame dell'immagine originale del video e disegnalo sulla pagina tramite canavs
Qui allego direttamente il codice sorgente, il codice è scritto in generale, ma evidenzia alcuni punti chiave
http://iwearshorts.com/blog/inline-video-on-the-iphone/
http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser
Video invece di animazione
Questo è un po 'ingombrante. Deve essere interattivo e trascinare la tela per raggiungere lo scopo di controllare l'immagine. Non ho ancora finito di scrivere tutto e le esigenze generali dell'azienda non lo avranno. Ecco una breve descrizione, viene elaborata anche da canvas + video, ma per eseguire una preelaborazione è necessario un contenitore canvas memorizzato nella cache. Attraverso la preelaborazione, ottieni i pixel di ogni immagine e, cambiando il valore di ogni pixel RBG, può filtrare lo sfondo, in modo che possa essere utilizzato come un'immagine PNG. Lo scriverò più tardi e lo pubblicherò ~~
Il nostro altro prodotto:
