Recentemente, estamos estudando o uso de vídeo em vez de animação e vídeo em vez de animação sprite. Chamamos esse tipo de vídeo interativo.
Animação de sprite tradicional: grande espaço em disco, download lento, especialmente a reprodução online, será mais lento
Muitos arquivos, muitas solicitações de http ao jogar online causarão uma resposta lenta ou comportamento anormal. Portanto, há uma necessidade urgente de desenvolver um conjunto de tecnologia para substituir a animação de sprite por vídeo. Chamamos esse tipo de vídeo de vídeo interativo
Problemas com vídeo tradicional:
1. Só pode ser jogado em uma área quadrada
2. No iPad, é uma janela para jogar, e no iPhone, só pode ser reproduzido em tela inteira.
3. Ao jogar, ele definitivamente aparecerá em primeiro lugar
O vídeo interativo possui as seguintes características:
No iPhone, a reprodução em tela cheia não é necessária, pode ser reproduzida em uma área
O vídeo interativo pode aparecer abaixo de objetos gráficos comuns
O vídeo interativo pode ter uma máscara, de modo que o fundo do vídeo possa ser removido e o vídeo e os objetos gráficos comuns possam ser integrados
Resumo: Para o vídeo usado para reprodução, iremos defini-lo como um vídeo tradicional. Para vídeos que precisam ser usados para fins específicos, nós os definimos como vídeos interativos. A pesquisa produziu resultados preliminares. A propósito, ele resume os problemas reais encontrados no desenvolvimento de áudio e vídeo do H5 móvel nos próximos anos e fornece suas próprias soluções. Dê uma olhada no efeito real final: compatível com PC (> IE9), iphone, ipad, Android 5.0
Resolva os problemas de manual, automático e janelamento no iPhone, e ele pode basicamente ser usado na produção real. À direita está o arquivo mp4 de vídeo original, o vídeo à esquerda substitui a animação e, em seguida, suporta o efeito de máscara de fundo, pode revelar o mapa básico e oferece suporte a uma série de operações interativas
Áudio H5
Cada vez que um objeto de áudio passa por um novo Áudio, um novo segmento pode ser visto no IOS.
Solução: Um novo objeto Audio, ao substituir diferentes endereços de áudio, atinge o objetivo de não abrir mais threads.
O suporte não é bom no Android
Solução: O problema na versão inferior do Android não foi resolvido. Geralmente, o desenvolvimento misto pode ser tratado ajustando a interface subjacente, como phonegap
Não é possível reproduzir automaticamente no iphone
Solução: a reprodução automática no iphone é um processo feito quando o IOS foi projetado. Parece ser para evitar o roubo automático de tráfego.
Simplificando, ele precisa ser acionado manualmente simulando o usuário, portanto, precisamos chamar este trecho de código no início:
Copiar código
// Corrija o problema de que o navegador ios não consegue reproduzir áudio automaticamente. Crie um novo áudio ao carregar e substitua src ao usá-lo.
Xut.fix = Xut.fix || {};
if (Xut.plat.isBrowser && Xut.plat.isIOS) {
var isAudio = falso
var fixaudio = function () {
if (! isAudio) {
isAudio = verdadeiro;
Xut.fix.audio = novo áudio ();
document.removeEventListener ('touchstart', fixaudio, false);
}
};
document.addEventListener ('touchstart', fixaudio, false);
}
Copie o código acima
Se você vincular esse código ao corpo: crie um objeto de áudio acionando-o manualmente e salve-o no global
Quando usado da seguinte forma:
Copiar código
// Se você usar Xut.fix.audio para especificar src para o navegador ios, consulte app.js para inicialização
if (Xut.fix.audio) {
auditivo
=
Xut.fix.audio;
áudio.src = url;
Else {}
áudio = novo áudio (url);
}
audio.autoplay = verdadeiro;
audio.play ();
Basta substituir o objeto de áudio. Simplificando, deve ser o objeto criado pelo gatilho do usuário para jogar.
Áudio de vídeo H5
As tags de vídeo podem ser raramente usadas no terminal móvel, o suporte para Android é muito ruim, visualmente 5.0 é melhor. O antigo problema no iPhone não pode ser reproduzido automaticamente (Salve dados, salve sua irmã !!!), e o padrão é o controle de tela inteira para jogar. Por muito tempo, ignorei esse processamento de vídeo. O Android usa a camada inferior, o iPhone usa diretamente o VideoJS, o flash embutido e o switch h5, o flash também tem problemas de suporte. Há algum tempo, o patrão tinha uma demanda. Nós aplicamos muitas animações, todas elas eram animações combinadas de rotas de sprites, variando de centenas de megabytes a centenas de megabytes em um aplicativo, então 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 está muito madura. Agora, a tecnologia de compressão de vídeo pode facilmente converter 720P. Filmes de alta definição, compactados para 10 M / min ou 160 K / s. O tamanho do arquivo da sequência de imagens é pelo menos várias dezenas de vezes menor. Ao mesmo tempo, a maioria dos dispositivos oferece suporte à descompressão de vídeo por hardware, de modo que o consumo de CPU da reprodução de vídeo é muito baixo, o consumo de bateria também é muito baixo e a velocidade de reprodução também é rápida. Mesmo a reprodução em tela cheia de 25 quadros pode ser facilmente alcançada.
O plano está finalizado e vários problemas a serem resolvidos estão aqui.
O vídeo inteiro, incluindo alguns objetos no vídeo, pode responder aos cliques do usuário, slides e outras operações no iPhone, pode ser reproduzido em uma janela, pode filtrar o fundo e pode ser usado como uma imagem PNG. O vídeo substitui a animação e, em seguida, suporta o efeito de máscara de fundo, que pode revelar a imagem de base e também resolve o problema de tela manual, automática e incompleta
janela iphone
Solução: Combine o processamento por meio de canvas + tags de vídeo
Princípio: pegue o quadro da imagem original do vídeo e desenhe-o na página por meio de canavs
Aqui, anexo diretamente o código-fonte, o código é escrito em geral, mas destaca alguns pontos-chave
http://iwearshorts.com/blog/inline-video-on-the-iphone/
http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser
Vídeo em vez de animação
Isso é um pouco complicado. Ele precisa ser interativo e arrastar a tela para atingir o objetivo de controlar a imagem. Eu não terminei de escrever tudo ainda, e as necessidades gerais da empresa não terão isso. Aqui está uma breve descrição, ele também é processado por canvas + video, mas um contêiner de canvas em cache é necessário para fazer um pré-processamento. Através do pré-processamento, obtém-se os pixels de cada imagem, e ao alterar o valor de cada pixel RBG, ele pode filtrar o fundo, para que possa ser usado como uma imagem PNG. Vou escrever mais tarde e publicá-lo ~~
Nosso outro produto:
