Recentemente, estamos estudando o uso do vídeo en lugar da animación e o vídeo no canto da animación sprite. A este tipo de vídeo chamámolo vídeo interactivo.
Animación sprite tradicional: o espazo en disco grande, a descarga lenta, especialmente a reprodución en liña, serán máis lentos
Demasiados ficheiros, demasiadas solicitudes http cando se xoga en liña, causarán unha resposta lenta ou un comportamento anormal. Polo tanto, é urxente desenvolver un conxunto de tecnoloxía para substituír a animación sprite por vídeo. Chamamos a este tipo de vídeo un vídeo interactivo
Problemas co vídeo tradicional:
1. Só se pode xogar nunha área en forma de cadrado
2. No iPad, é unha xanela para xogar e no iPhone, só se pode reproducir en pantalla completa.
3. Ao xogar, definitivamente aparecerá á vangarda
O vídeo interactivo ten as seguintes características:
No iPhone, a reprodución a pantalla completa non é necesaria, pódese reproducir nunha área
O vídeo interactivo pode aparecer baixo obxectos gráficos comúns
O vídeo interactivo pode ter unha máscara para que se poida eliminar o fondo do vídeo e integrar o vídeo e os obxectos gráficos comúns
resumo: Para o vídeo empregado para reproducir, configurarémolo como un vídeo tradicional. Para os vídeos que precisan usarse con fins específicos, configurámolos como vídeos interactivos. A investigación deu resultados preliminares. Por certo, resume os problemas reais atopados no desenvolvemento de audio e vídeo do móbil H5 nos próximos anos e ofrece as súas propias solucións. Bota unha ollada ao efecto real final: compatible con PC (> IE9), iphone, iPad, Android 5.0
Resolva os problemas do manual, automático e fiestras no iPhone, e pode basicamente úsase na produción real. Á dereita está o ficheiro mp4 de vídeo orixinal, o vídeo á esquerda substitúe á animación e, a continuación, admite o efecto máscara de fondo, pode revelar o mapa base e admite unha serie de operacións interactivas.
Audio H5
Cada vez que se pasa un obxecto de audio a través dun novo audio, pódese ver un novo fío en iOS.
Solución: un novo obxecto de audio, substituíndo diferentes enderezos de audio, consegue o obxectivo de non abrir máis fíos.
A compatibilidade non é boa en Android
Solución: o problema na versión inferior de Android non se resolve. Xeralmente, o desenvolvemento mixto pódese manexar axustando a interface subxacente, como phonegap
Non se pode reproducir automaticamente no iPhone
Solución: a reprodución automática no iPhone é un proceso feito cando se deseñou iOS. Parece ser para evitar o roubo automático de tráfico.
Simplificando, debe ser activado manualmente simulando ao usuario, polo que debemos chamar a este anaco de código ao principio:
Copia o código
// Soluciona o problema de que o navegador ios non pode reproducir audio automaticamente. Crea novo audio ao cargar e substitúe src ao usalo.
Xut.fix = Xut.fix || {};
if (Xut.plat.isBrowser && Xut.plat.isIOS) {
var isAudio = falso
var fixaudio = function () {
if (! isAudio) {
isAudio = verdadeiro;
Xut.fix.audio = new Audio ();
document.removeEventListener ('touchstart', fixaudio, false);
}
};
document.addEventListener ('touchstart', fixaudio, false);
}
Copia o código anterior
Se ligas tal código ao corpo: crea un obxecto de audio activándoo manualmente e logo gárdao no global
Cando se usa do seguinte xeito:
Copia o código
// Se usa Xut.fix.audio para especificar src para o navegador iOS, consulte app.js para a inicialización
se (Xut.fix.audio) {
audio
=
Xut.fix.audio;
audio.src = url;
Else {}
audio = novo audio (url);
}
audio.autoplay = verdadeiro;
audio.play ();
Simplemente substitúa o obxecto de audio. Simplificando, debe ser o obxecto creado polo disparador do usuario para xogar.
Audio de vídeo H5
É probable que as etiquetas de vídeo non se usen no terminal móbil, a compatibilidade con Android é moi mala, visualmente 5.0 é mellor. O vello problema no iPhone non se pode reproducir automaticamente (garda datos, garda a túa irmá !!!) e o predeterminado é o control de pantalla completa para reproducilo. Durante moito tempo, ignorei este procesamento de vídeo. Android usa a capa inferior, o iPhone usa directamente VideoJS, o flash incorporado e o interruptor h5, o flash tamén ten problemas de soporte. Hai un tempo, o xefe tiña unha demanda. Aplicamos demasiadas animacións, todas elas eran animacións combinadas de rutas sprite, que van desde centos de megabytes ata centos de megabytes nunha mesma aplicación, polo que é urxente unha solución para comprimir imaxes. A solución final é empregar vídeo en vez de animación, porque a tecnoloxía de compresión de vídeo desenvolveuse durante moitos anos e foi moi madura. Agora a tecnoloxía de compresión de vídeo pode converter facilmente 720P. Películas de alta definición, comprimidas a 10M / min ou 160K / seg. O tamaño do ficheiro da secuencia de imaxes é polo menos varias decenas de veces menor. Ao mesmo tempo, a maioría dos dispositivos admiten a descompresión por hardware do vídeo, de xeito que o consumo de CPU na reprodución de vídeo é moi baixo, o consumo de batería tamén é moi baixo e a velocidade de reprodución tamén é rápida. Ata a reprodución a pantalla completa de 25 fotogramas pódese conseguir facilmente.
O plan está finalizado e hai varios problemas por resolver.
Todo o vídeo, incluídos algúns obxectos no vídeo, pode responder a clics de usuarios, diapositivas e outras operacións baixo o iPhone, pódese reproducir nunha xanela, pode filtrar o fondo e pode usarse como unha imaxe PNG. O vídeo substitúe á animación e, a continuación, admite o efecto de máscara de fondo, que pode revelar a imaxe base e tamén resolve o problema da pantalla manual, automática e incompleta.
fiestras de iphone
Solución: combina o procesamento a través de canvas + etiquetas de vídeo
Principio: obtén o marco de imaxe orixinal do vídeo e debúxao á páxina a través de canavs
Aquí adxunto directamente o código fonte, o código está escrito en xeral, pero destaca algúns puntos clave
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 lugar de animación
Isto é un pouco complicado. Debe ser interactivo e arrastrar o lenzo para conseguir o propósito de controlar a imaxe. Aínda non rematei de escribir todo e as necesidades xerais da empresa non terán isto. Aquí hai unha breve descrición, tamén se procesa con canvas + video, pero é necesario un contedor de canvas en caché para facer un preprocesamento. A través do preprocesamento, obtén os píxeles de cada imaxe e, cambiando o valor de cada píxel RBG, pode filtrar o fondo para que poida usarse como unha imaxe PNG. Vou escribilo máis tarde e publicalo ~~
Noso outro produto:
