Recientemente, estamos estudiando el uso de video en lugar de animación y video en lugar de animación de sprites. A este tipo de video lo llamamos video interactivo.
Animación tradicional de sprites: gran espacio en disco, descarga lenta, especialmente reproducción en línea, será más lenta
Demasiados archivos, demasiadas solicitudes http cuando se reproduce en línea, provocarán una respuesta lenta o un comportamiento anormal. Por lo tanto, existe una necesidad urgente de desarrollar un conjunto de tecnología para reemplazar la animación de sprites con video. A este tipo de video lo llamamos un video interactivo.
Problemas con el video tradicional:
1. Solo se puede jugar en un área de forma cuadrada.
2. Debajo del iPad, es una ventana para jugar, y debajo del iPhone, solo se puede reproducir en pantalla completa.
3. Al jugar, definitivamente aparecerá a la vanguardia
El video interactivo tiene las siguientes características:
Debajo del iPhone, no se requiere reproducción a pantalla completa, se puede reproducir en un área
El video interactivo puede aparecer debajo de objetos gráficos ordinarios
El video interactivo puede tener una máscara, de modo que el fondo del video se pueda eliminar y el video y los objetos gráficos ordinarios se puedan integrar
Resumen: Para el video utilizado para la reproducción, lo configuraremos como un video tradicional. Para los videos que deben usarse para fines específicos, los configuramos como videos interactivos. La investigación ha arrojado resultados preliminares. Por cierto, resume los problemas reales encontrados en el desarrollo de audio y video del H5 móvil en los próximos años y proporciona sus propias soluciones. Eche un vistazo al efecto real final: compatible con PC (> IE9), iphone, ipad, Android 5.0
Resuelva los problemas de uso manual, automático y de ventanas en el iPhone, y puede Básicamente se utilizará en la producción real. A la derecha está el archivo mp4 de video original, el video de la izquierda reemplaza la animación y luego admite el efecto de máscara de fondo, puede revelar el mapa base y admite una serie de operaciones interactivas
Audio H5
Cada vez que un objeto de audio pasa a través de un nuevo audio, se puede ver un nuevo hilo en IOS.
Solución: un nuevo objeto de audio, al reemplazar diferentes direcciones de audio, logra el objetivo de no abrir más hilos.
El soporte no es bueno en Android
Solución: el problema en la versión inferior de Android no está resuelto. Generalmente, el desarrollo mixto se puede manejar ajustando la interfaz subyacente, como phonegap
No se puede reproducir automáticamente en el iPhone
Solución: la reproducción automática en el iPhone es un proceso que se realiza cuando se diseñó IOS. Parece ser para evitar el robo automático de tráfico.
En pocas palabras, debe activarse manualmente simulando al usuario, por lo que debemos llamar a este código desde el principio:
Copiar código
// Soluciona el problema de que el navegador ios no puede reproducir audio automáticamente. Cree un nuevo audio al cargar y reemplace src cuando lo use.
Xut.fix = Xut.fix || {};
if (Xut.plat.isBrowser && Xut.plat.isIOS) {
var esAudio = falso
var fixaudio = function () {
if (! isAudio) {
esAudio = verdadero;
Xut.fix.audio = nuevo Audio ();
document.removeEventListener ('touchstart', fixaudio, false);
}
};
document.addEventListener ('touchstart', fixaudio, false);
}
Copia el código de arriba
Si vincula dicho código al cuerpo: cree un objeto de audio activándolo manualmente y luego guárdelo en el archivo global.
Cuando se usa de la siguiente manera:
Copiar código
// Si usa Xut.fix.audio para especificar src para el navegador ios, consulte app.js para la inicialización
si (Xut.fix.audio) {
audio
=
Xut.arreglar.audio;
audio.src = URL;
} Else {
audio = audio nuevo (url);
}
audio.autoplay = verdadero;
audio.play ();
Simplemente reemplace el objeto de audio. En pocas palabras, debe ser el objeto creado por el disparador del usuario para jugar.
Audio de video H5
Es posible que las etiquetas de video rara vez se usen en el terminal móvil, el soporte de Android es una lástima, visualmente 5.0 es mejor. El viejo problema en el iPhone no se puede reproducir automáticamente (¡¡Guarda datos, salva a tu hermana !!!), y el control predeterminado es el control de pantalla completa para jugar. Durante mucho tiempo, ignoré este procesamiento de video. Android usa la capa inferior, iPhone usa directamente VideoJS, el flash incorporado y el interruptor h5, el flash también tiene problemas de soporte. Hace un tiempo, el jefe tenía una demanda. Aplicamos demasiadas animaciones, todas eran animaciones combinadas de rutas de sprites, que van desde cientos de megabytes a cientos de megabytes en una aplicación, por lo que existe una necesidad urgente de una solución para comprimir imágenes. La solución final es usar video en lugar de animación, porque la tecnología de compresión de video se ha desarrollado durante muchos años y ha sido muy madura. Ahora la tecnología de compresión de video puede convertir fácilmente 720P. Películas de alta definición comprimidas a 10 M / min o 160 K / seg. El tamaño de archivo de la secuencia de imágenes es al menos varias decenas de veces menor. Al mismo tiempo, la mayoría de los dispositivos admiten la descompresión de video por hardware, por lo que el consumo de CPU de la reproducción de video es muy bajo, el consumo de batería también es muy bajo y la velocidad de reproducción también es rápida. Incluso se puede lograr fácilmente la reproducción a pantalla completa de 25 fotogramas.
El plan está finalizado y aquí se encuentran varios problemas por resolver.
El video completo, incluidos algunos objetos en el video, puede responder a los clics del usuario, diapositivas y otras operaciones debajo del iPhone, se puede reproducir en una ventana, se puede filtrar el fondo y se puede usar como una imagen PNG. El video reemplaza la animación y luego admite el efecto de máscara de fondo, que puede revelar la imagen base y también resuelve el problema de la pantalla manual, automática e incompleta.
ventanas de iphone
Solución: combine el procesamiento a través de etiquetas de lienzo + video
Principio: obtenga el marco de imagen original del video y dibuje a la página a través de canavs
Aquí adjunto directamente el código fuente, el código está escrito en general, pero resalta algunos puntos clave
http://iwearshorts.com/blog/inline-video-on-the-iphone/
http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser
Video en lugar de animación
Esto es un poco engorroso. Debe ser interactivo y arrastrar el lienzo para lograr el propósito de controlar la imagen. No he terminado de escribirlo todo todavía, y las necesidades generales de la empresa no lo tendrán. Aquí hay una breve descripción, también se procesa mediante lienzo + video, pero se requiere un contenedor de lienzo en caché para realizar un preprocesamiento. A través del preprocesamiento, obtenga los píxeles de cada imagen y, al cambiar el valor de cada píxel RBG, puede filtrar el fondo para que pueda usarse como una imagen PNG. Lo escribiré más tarde y lo publicaré ~~
Nuestro otro producto:
