Recentment, estem estudiant l’ús de vídeo en lloc d’animació i vídeo en lloc d’animació sprite. A aquest tipus de vídeo l'anomenem vídeo interactiu.
Animació sprite tradicional: espai al disc gran, baixada lenta, sobretot la reproducció en línia, serà més lenta
Massa fitxers, massa sol·licituds http quan es juga en línia, provocaran una resposta lenta o un comportament anormal. Per tant, és urgent desenvolupar un conjunt de tecnologia per substituir l’animació sprite per vídeo. A aquest tipus de vídeo l'anomenem vídeo interactiu
Problemes amb el vídeo tradicional:
1. Només es pot jugar en una zona de forma quadrada
2. Sota l'iPad, és una finestra per reproduir i, a l'iPhone, només es pot reproduir en pantalla completa.
3. Quan es juga, definitivament apareixerà al capdavant
El vídeo interactiu té les característiques següents:
A l'iPhone, la reproducció a pantalla completa no és necessària, es pot reproduir en una àrea
El vídeo interactiu pot aparèixer a sota dels objectes gràfics habituals
El vídeo interactiu pot tenir una màscara, de manera que es pot eliminar el fons del vídeo i integrar el vídeo i els objectes gràfics normals
Resum: Per al vídeo utilitzat per reproduir-lo, el configurarem com un vídeo tradicional. Per als vídeos que cal utilitzar per a propòsits específics, els configurem com a vídeos interactius. La investigació ha donat resultats preliminars. Per cert, resumeix els problemes reals trobats en el desenvolupament d’àudio i vídeo del mòbil H5 en els propers anys i proporciona les seves pròpies solucions. Feu un cop d'ull a l'efecte real final: compatible amb PC (> IE9), iPhone, iPad i Android 5.0
Resoleu els problemes de finestra manuals, automàtics i de finestres a l'iPhone, i pot bàsicament s’utilitzarà en la producció real. A la dreta hi ha el fitxer mp4 de vídeo original, el vídeo de l'esquerra substitueix l'animació i, a continuació, admet l'efecte de màscara de fons, pot revelar el mapa base i admet una sèrie d'operacions interactives
Àudio H5
Cada vegada que es passa un objecte d'àudio a través d'un àudio nou, es pot veure un nou fil a iOS.
Solució: un nou objecte d'àudio, en substituir diferents adreces d'àudio, aconsegueix l'objectiu de no obrir més fils.
El suport no és bo a Android
Solució: el problema de la versió inferior d'Android no s'ha resolt. En general, el desenvolupament mixt es pot gestionar ajustant la interfície subjacent, com ara phonegap
No es pot reproduir automàticament a l'iPhone
Solució: La reproducció automàtica a l'iPhone és un procés realitzat quan es va dissenyar iOS. Sembla prevenir el robatori automàtic de trànsit.
En poques paraules, s’ha d’activar manualment simulant l’usuari, de manera que hem de trucar a aquest fragment de codi al principi:
Còpia de codi
// Solucioneu el problema que el navegador iOS no pot reproduir àudio automàticament. Creeu àudio nou en carregar-lo i substituïu src quan el feu servir.
Xut.fix = Xut.fix || {};
if (Xut.plat.isBrowser && Xut.plat.isIOS) {
var isAudio = fals
var fixaudio = function () {
if (! isAudio) {
isAudio = cert;
Xut.fix.audio = new Audio ();
document.removeEventListener ('touchstart', fixaudio, false);
}
};
document.addEventListener ('touchstart', fixaudio, false);
}
Copieu el codi anterior
Si enllaceu aquest codi amb el cos: creeu un objecte d'àudio activant-lo manualment i deseu-lo al global
Quan s'utilitza de la següent manera:
Còpia de codi
// Si utilitzeu Xut.fix.audio per especificar src per al navegador iOS, consulteu app.js per a la inicialització
if (Xut.fix.audio) {
àudio
=
Xut.fix.audio;
audio.src = url;
} Else {
àudio = àudio nou (url);
}
audio.autoplay = cert;
audio.play ();
Simplement substituïu l'objecte d'àudio. En poques paraules, ha de ser l'objecte creat pel disparador de l'usuari per jugar.
Àudio de vídeo H5
Les etiquetes de vídeo poques vegades s’utilitzen al terminal mòbil; la compatibilitat amb Android és una pena, visualment 5.0 és millor. El problema anterior de l’iPhone no es pot reproduir automàticament (Desa dades, guarda la teva germana !!!) i el control per defecte és el de pantalla completa per reproduir-lo. Durant molt de temps, vaig ignorar aquest processament de vídeo. Android utilitza la capa inferior, l'iPhone utilitza directament VideoJS, el flaix i el commutador h5 integrats, el flaix també té problemes de suport. Fa un temps, el cap tenia una demanda. Vam aplicar massa animacions, totes eren animacions combinades de rutes sprite, que van des de centenars de megabytes fins a centenars de megabytes en una sola aplicació, de manera que hi ha una necessitat urgent de solució per comprimir imatges. La solució final és utilitzar el vídeo en lloc de l’animació, perquè la tecnologia de compressió de vídeo s’ha desenvolupat durant molts anys i ha estat molt madura. Ara la tecnologia de compressió de vídeo pot convertir fàcilment 720P. Pel·lícules d'alta definició, comprimides a 10M / min o 160K / seg. La mida del fitxer de la seqüència d'imatges és almenys diverses desenes de vegades menor. Al mateix temps, la majoria de dispositius admeten la descompressió de maquinari de vídeo, de manera que el consum de CPU de reproducció de vídeo és molt baix, el consum de bateria també és molt baix i la velocitat de reproducció també és ràpida. Fins i tot es pot aconseguir una reproducció a pantalla completa de 25 fotogrames.
El pla està finalitzat i hi ha diversos problemes a resoldre.
El vídeo sencer, inclosos alguns objectes del vídeo, pot respondre als clics, diapositives i altres operacions de l'iPhone, es pot reproduir en una finestra, pot filtrar el fons i es pot utilitzar com una imatge PNG. El vídeo substitueix l'animació i, a continuació, admet l'efecte de màscara de fons, que pot revelar la imatge base i també resol el problema de la pantalla manual, automàtica i incompleta.
finestra d'iPhone
Solució: combina el processament mitjançant etiquetes canvas + video
Principi: obteniu el marc d’imatge original del vídeo i dibuixeu-lo a la pàgina mitjançant canavs
Aquí adjunto directament el codi font, el codi està escrit en general, però ressalta alguns punts clau
http://iwearshorts.com/blog/inline-video-on-the-iphone/
http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser
Vídeo en lloc d’animació
Això és una mica feixuc. Ha de ser interactiu i arrossegar el llenç per aconseguir el propòsit de controlar la imatge. Encara no he acabat d'escriure-ho tot, i les necessitats generals de l'empresa no ho tindran. Aquí hi ha una breu descripció, també es processa amb canvas + video, però cal fer un contenidor de canvas en memòria cau per fer un preprocessament. Mitjançant el preprocessament, obteniu els píxels de cada imatge i, canviant el valor de cada píxel RBG, pot filtrar el fons, de manera que es pugui utilitzar com una imatge PNG. L’escriuré més endavant i el publicaré ~~
El nostre altre producte:
