Recentemente, estamos estudando o uso de vídeo para substituir a animação, e o uso de vídeo para substituir a animação sprite. Chamamos esse tipo de vídeo de vídeo interativo.
Animação de sprite tradicional:Portanto, há uma necessidade urgente de desenvolver um conjunto de tecnologias para substituir animações de sprites por vídeos. Chamamos esse tipo de vídeo de vídeo interativo
Problemas com vídeo tradicional:A pesquisa inicialmente produziu resultados. A propósito, resumirei os problemas práticos encontrados em áudio e vídeo durante o desenvolvimento do H5 móvel nos últimos anos e apresentarei minhas próprias soluções.
Dê uma olhada no efeito final real: compatível com PC (>IE9), iPhone, iPad, Android 5.0
Ele resolve os problemas de manual, automático, janelamento, etc. no iPhone e pode basicamente ser usado na produção real.
À direita está o arquivo mp4 do vídeo original
O vídeo à esquerda substitui a animação e suporta o efeito de máscara de fundo, que pode revelar a imagem base e suportar uma série de operações interativas.
Áudio H5áudioCada vez que um objeto de áudio passa por um novo áudio, você pode ver que um novo thread será gerado no IOS.
Solução: Utilize um novo objeto Audio para atingir o objetivo de não abrir mais threads substituindo diferentes endereços de áudio.
Suporte ruim no AndroidSolução: O problema nas versões inferiores do Android não é resolvido. Geralmente, no desenvolvimento híbrido, a interface subjacente pode ser ajustada, como o phonegap.
Não é possível reproduzir automaticamente no iPhoneSolução: A reprodução automática no iPhone é um processo realizado quando o IOS foi projetado para evitar o roubo automático de tráfego.
Simplificando, você precisa simular o usuário para acioná-lo manualmente, então precisamos chamar este trecho de código no início:
Isso é do meu projeto, acabei de deduzir.
//Corrige o problema de que o navegador ios não consegue reproduzir áudio automaticamente. Crie um novo áudio ao carregar e substitua o src ao usá-lo. plat. isIOS) { var isAudio = false var fixaudio = function() { if (!isAudio) { isAudio = true Xut.fix.audio = new Audio(); document.removeEventListener('touchstart', fixaudio, false); document.addEventListener('touchstart', fixaudio, false);}Se você vincular esse código ao corpo: crie um objeto de áudio por meio de acionamento manual e salve-o no arquivo global
Ao usá-lo, é o seguinte
//Se você usar Xut.fix.audio para especificar a inicialização src para o navegador ios, consulte app.jsif (Xut.fix.audio) { audio = Xut.fix.audio; audio.src = url;} else { audio = new Áudio(url);}audio.autoplay = true;audio.play();Basta substituir o objeto de áudio diretamente. Simplificando, se for criado automaticamente, deve ser um objeto acionado pelo usuário para ser reproduzido.
Vídeoáudio H5A tag de vídeo raramente é usada em dispositivos móveis. O suporte ao Android é péssimo.
Um problema antigo no iPhone é que ele não pode reproduzir automaticamente (salve dados, salve sua irmã!!!), e o padrão é a reprodução controlada em tela cheia
Por muito tempo, ignorei esse processamento de vídeo. O Android usa a camada inferior e o iPhone usa VideoJS diretamente. Ele possui flash integrado e comutação h5 também tem problemas de suporte.
Há algum tempo, meu chefe fez um pedido. Temos muitas animações de aplicativos, todas elas combinações de animações de rotas de sprites. Um aplicativo pode variar de centenas de megabytes a centenas de megabytes.
Portanto, há uma necessidade urgente de uma solução para compactar imagens
A solução final é usar vídeo em vez de animação, porque a tecnologia de compressão de vídeo foi desenvolvida há muitos anos e se tornou muito madura. A tecnologia atual de compactação de vídeo pode compactar facilmente filmes de alta definição 720P para 10M/minuto ou 160K/segundo. É pelo menos dezenas de vezes menor que o tamanho do arquivo da sequência de imagens. Ao mesmo tempo, a maioria dos dispositivos suporta descompressão de vídeo por hardware. Dessa forma, o consumo de CPU para reprodução de vídeo é muito baixo, o consumo de bateria também é muito baixo e a velocidade de reprodução ainda é rápida. Até a reprodução em tela cheia com 25 quadros pode ser facilmente alcançada.
Depois que o plano for finalizado, alguns problemas precisam ser resolvidos.
1. Todo o vídeo, incluindo determinados objetos no vídeo, pode responder a cliques, slides e outras operações do usuário.
2. No iPhone, você pode jogar em uma janela
3. Capacidade de filtrar o fundo para que possa ser usado como uma imagem PNG
O efeito real final também é mostrado na animação gif inicial:
O vídeo substitui a animação e suporta o efeito de máscara de fundo, que pode revelar a imagem base.
Ao mesmo tempo, também resolveu o problema de tela manual, automática e não cheia.
janelas do iphoneSolução:
Processado por meio da combinação canvas + tag de vídeo
Princípio: Obtenha o quadro original do vídeo e desenhe-o na página por meio de canavs
Aqui anexei diretamente o código-fonte. O código geralmente é escrito, mas vários pontos principais são destacados.
http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser
Vídeo em vez de animaçãoIsso é um pouco problemático. Você precisa interagir e arrastar a tela para controlar a imagem. Ainda não terminei de escrever. As necessidades gerais da empresa não terão isso. vídeo, mas precisa de um contêiner de tela em cache para pré-processamento. Através do pré-processamento, os pixels de cada imagem são obtidos. Alterando o valor RBG de cada pixel, o fundo pode ser filtrado, para que possa ser usado como um PNG. imagem. No futuro está escrito, vamos publicá-lo ~~
O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.