Recientemente, estamos estudiando el uso de video para reemplazar la animación y el uso de video para reemplazar la animación de sprites. A este tipo de video lo llamamos video interactivo.
Animación de sprites tradicional:Por lo tanto, existe una necesidad urgente de desarrollar un conjunto de tecnologías para reemplazar las animaciones de sprites con videos. A este tipo de vídeo lo llamamos vídeo interactivo.
Problemas con el vídeo tradicional:La investigación inicialmente arrojó resultados. Por cierto, resumiré los problemas prácticos encontrados en audio y video durante el desarrollo del H5 móvil en los últimos años y daré mis propias soluciones.
Eche un vistazo al efecto final real: compatible con PC (>IE9), iPhone, iPad, Android 5.0
Resuelve los problemas manuales, automáticos, de ventanas, etc. en iPhone y básicamente se puede utilizar en la producción real.
A la derecha está el archivo de vídeo mp4 original.
El video de la izquierda reemplaza la animación y admite el efecto de máscara de fondo, que puede revelar la imagen base y admitir una serie de operaciones interactivas.
audio h5Cada vez que un objeto de audio pasa a través de un nuevo audio, puede ver que se generará un nuevo hilo en IOS. Esto es repugnante.
Solución: utilice un nuevo objeto de audio para lograr el propósito de no abrir más hilos reemplazando diferentes direcciones de audio.
Pobre soporte en AndroidSolución: el problema en versiones inferiores de Android no se resuelve. Generalmente, en el desarrollo híbrido, la interfaz subyacente se puede ajustar, como el espacio telefónico.
No se puede reproducir automáticamente en iPhoneSolución: La reproducción automática en iPhone es un proceso que se realizaba cuando se diseñó IOS. Parece ser para evitar el robo automático de tráfico.
En pocas palabras, debe simular al usuario para activarlo manualmente, por lo que debemos llamar a este fragmento de código al principio:
Esto es de mi proyecto, lo acabo de deducir.
// Soluciona el problema de que el navegador ios no puede reproducir audio automáticamente. Crea un nuevo audio al cargar y reemplaza el src cuando lo usas. plat. isIOS) { var isAudio = false var fixaudio = function() { if (!isAudio) { isAudio = true; document.removeEventListener('touchstart', fixaudio, false);}Si vincula dicho código al cuerpo: cree un objeto de audio mediante activación manual y luego guárdelo en el global
Al usarlo, es el siguiente.
//Si usa Xut.fix.audio para especificar la inicialización de src para el navegador ios, consulte app.jsif (Xut.fix.audio) { audio = Xut.fix.audio = url;} else { audio = new; Audio(url);}audio.autoplay = verdadero;audio.play();Simplemente reemplace el objeto de audio directamente. En pocas palabras, si se va a crear automáticamente, debe ser un objeto activado por el usuario para reproducirse.
audio de vídeo h5Es posible que la etiqueta de video rara vez se use en dispositivos móviles. La compatibilidad con Android es terrible. Solo mejoró en 5.0.
Un viejo problema del iPhone es que no puede reproducir automáticamente (¡guarda datos, salva a tu hermana!), y el valor predeterminado es el control de reproducción en pantalla completa.
Durante mucho tiempo, ignoré este procesamiento de video. Android usa la capa inferior y iPhone usa VideoJS directamente. Tiene flash incorporado y el cambio de flash h5 también tiene problemas.
Hace un tiempo, mi jefe tuvo una solicitud. Tenemos demasiadas animaciones de aplicaciones, todas las cuales son animaciones combinadas de rutas de sprites que pueden oscilar entre cientos de megabytes y cientos de megabytes.
Por eso existe una necesidad urgente de una solución para comprimir imágenes.
La solución final es utilizar vídeo en lugar de animación, porque la tecnología de compresión de vídeo se ha desarrollado durante muchos años y se ha vuelto muy madura. La tecnología de compresión de vídeo actual puede comprimir fácilmente películas de alta definición de 720P a 10 M/minuto o 160 K/segundo. Es al menos decenas de veces más pequeño que el tamaño del archivo de la secuencia de imágenes. Al mismo tiempo, la mayoría de los dispositivos admiten la descompresión de videos por hardware. De esta manera, 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 sigue siendo rápida. Incluso se puede lograr fácilmente una reproducción en pantalla completa a 25 fotogramas.
Una vez finalizado el plan, es necesario resolver algunos problemas.
1. Todo el video, incluidos ciertos objetos del video, puede responder a los clics, diapositivas y otras operaciones del usuario.
2. En iPhone, puedes jugar en una ventana.
3. Posibilidad de filtrar el fondo para que pueda usarse como una imagen PNG
El efecto final real también se muestra en la animación gif inicial:
El vídeo reemplaza la animación y admite el efecto de enmascaramiento de fondo, que puede revelar la imagen base.
Al mismo tiempo, también resolvió el problema de la pantalla manual, automática y no completa.
ventanas de iphoneSolución:
Procesado mediante combinación de lienzo + etiqueta de video
Principio: obtenga el fotograma original del video y diríjalo a la página a través de canavs.
Aquí adjunto directamente el código fuente. El código generalmente está escrito, pero se resaltan varios puntos clave.
http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser
Vídeo en lugar de animación.Esto es un poco problemático. Debes interactuar y arrastrar el lienzo para controlar la imagen. Aún no he terminado de escribirlo. Las necesidades generales de la empresa no tienen esto. Aquí también se procesa mediante lienzo. video, pero necesita Hay un contenedor de lienzo en caché para el preprocesamiento. Mediante el preprocesamiento, se obtienen los píxeles de cada imagen. Al cambiar el valor RBG de cada píxel, se puede filtrar el fondo para que se pueda usar como un PNG. imagen En el futuro Está escrito, publiquémoslo ~~.
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.