wechatVideoExample
1.0.0
Teste o código-fonte para reproduzir vídeos no WeChat: Como o WeChat usa o navegador X5, vários problemas estranhos ocorrem ao usar a tag de vídeo para reproduzir vídeos. Este código-fonte é um código-fonte provisório feito no processo de resolução deste problema. Inclui vários casos de teste: uso de canvas para reproduzir vídeos, uso de imagens para reproduzir vídeos, uso de tags x5, etc. Esta biblioteca de código-fonte disponível pode ser mantida e os alunos interessados podem baixá-la por conta própria.
###Depois de baixar a introdução, crie um novo diretório no host e copie todo o código fonte para este diretório. Use o navegador WeChat para acessar a página html interna para testar.
Autor chenjsh36 Equipe de tecnologia de experiência em dados financeiros da Ant
Com o advento da era do tráfego e o aprimoramento da tecnologia de hardware, cada vez mais sites esperam reproduzir seus próprios vídeos em PCs ou terminais móveis. A melhoria gradual da compatibilidade do <video> torna os desenvolvedores mais dispostos a implementá-lo. cenários de reprodução.
Este artigo lista principalmente os cenários comuns para reprodução de vídeo e as armadilhas encontradas em cada cenário. Espera-se que possa ajudar os desenvolvedores a escolher soluções técnicas apropriadas mais rapidamente e reduzir as armadilhas ao encontrar o desenvolvimento da demanda__.
atributo booleano autoPlay ; quando especificado, o vídeo começará a ser reproduzido automaticamente e não parará de aguardar o carregamento dos dados.
A reprodução automática de vídeo pode reproduzir automaticamente o vídeo quando a página está aberta e os recursos estão carregados o suficiente, reduzindo a interação de um clique do usuário. Também pode ser aplicado a fundos dinâmicos e funções de imitação de videochamada H5. No entanto, devido a vários motivos, a reprodução automática tem vários graus de restrições tanto no PC como nos terminais móveis.
No início, a partir da versão 10 , era necessária uma tag de vídeo de gesto do usuário , as regras de vídeo foram modificadas e a Apple relaxou a reprodução inline e automática . A estratégia é a seguinte (aplicável apenas ao navegador Safari):
<video> poderão ser reproduzidos autoplay sem um gesto do usuário se a mídia de origem não contiver faixas de áudio (elementos de vídeo sem fontes de áudio permitem a reprodução automática).<video muted> também poderão ser reproduzidos automaticamente sem um gesto do usuário.<video> ganhar uma trilha de áudio ou for desativado sem um gesto do usuário, a reprodução será pausada.<video autoplay> só começarão a ser reproduzidos quando estiverem visíveis na tela, como quando são rolados para a janela de visualização, tornados visíveis por meio de CSS e inseridos no DOM (os elementos de vídeo só começarão a ser reproduzidos quando estiverem visíveis na tela).<video autoplay> serão pausados se ficarem invisíveis, como ao serem rolados para fora da janela de visualização. __Early__ também exigia gestos do usuário para reproduzir; mais tarde, o Chrome 53 do Android relaxou a política de reprodução automática. A política é diferente do Safari do iOS. É necessário definir a reprodução automática e silenciar (se o som está silenciado) ao mesmo tempo para permitir a reprodução automática. reprodução; __FireFox e UC Browser do Android__ suportam reprodução automática em qualquer circunstância, a situação com outros navegadores Android não está clara;
No início, a reprodução automática era suportada, mas recentemente o Safari e o Chrome modificaram sucessivamente suas estratégias de reprodução automática...
__Safari 10 e posterior__Vídeo e áudio com áudio estão desativados por padrão na reprodução automática . Para obter mais informações, consulte este artigo;
Reprodução automática no Chrome (versão antiga):
Safari (pós 10) não é reproduzido automaticamente:
Vídeos com som silenciado ainda podem ser reproduzidos. Vídeos com som serão reproduzidos automaticamente com base no __Índice de Participação na Mídia__. A explicação oficial e as dimensões relacionadas são fornecidas:
MEI é um índice que avalia a participação midiática do usuário no site atual. Depende das seguintes dimensões:
- O usuário permaneceu na mídia por mais de 7 segundos
- O áudio deve ser exibido e não silenciado
- Interagiu com o vídeo
- O tamanho da mídia não deve ser menor que 200x140.
Depois de ler isso, a opinião do desenvolvedor é a seguinte:
Felizmente, tanto o Safari quanto o Chrome, embora restrinjam a reprodução automática, fornecem um mecanismo para detectar se o vídeo pode ser reproduzido automaticamente, para que os desenvolvedores possam ter alternativas quando descobrirem que a reprodução automática não pode ocorrer:
var promise = document.querySelector('video').play();
if (promise !== undefined) {
promise.catch(error => {
// Auto-play was prevented
// Show a UI element to let the user manually start playback
}).then(() => {
// Auto-play started
});
}
porque pode ser perturbador, consumir muitos dados e muitos usuários não gostam (porque pode ser perturbador, consumir muitos dados e muitos usuários não gostam) .
Descobri que o H5 que é reproduzido automaticamente muitas vezes pode ser visto no WeChat. No entanto, o exemplo de reprodução de vídeo escrito pelo autor com reprodução automática e playInline ainda não pode ser reproduzido automaticamente no WeChat, mas pode ser reproduzido automaticamente no DingTalk.
| Navegador do sistema | com som | sem som |
|---|---|---|
| IOS DingTalk | apoiar | apoiar |
| iOS Safári | proibir | Reprodução automática |
| IOS WeChat | proibir | proibir |
Através da consulta das informações, o desenvolvimento do IOS WebAPP é baseado no kernel do navegador fornecido pelo IOS , portanto, o desempenho da reprodução automática pode ser modificado na visualização da web do WebAPP, obviamente, suporta a reprodução automática, enquanto o WeChat proíbe a reprodução automática, mas fornece Built-in. eventos para oferecer suporte à reprodução automática:
Reprodução automática através do evento WeixinJSBridgeReady no WeChat:
document . addEventListener (
'WeixinJSBridgeReady' ,
function ( ) {
video . play ( ) ;
} ,
false
) ; Em navegadores móveis, quando o usuário clica para reproduzir ou aciona a reprodução por meio da API video.play(), o vídeo será forçado a ser reproduzido em tela inteira na parte superior. A intenção original do design pode ser que a tela inteira forneça uma tela inteira. melhor experiência do usuário, mas às vezes os desenvolvedores desejam poder controlar se devem ir para tela inteira para atender a outras necessidades.
Se você deseja obter uma reprodução sem tela inteira, basta adicionar o atributo playsinline à tag video. Esse atributo basicamente não é problema em navegadores móveis baseados no kernel do webkit. Se não funcionar, basta adicionar webkit-playsinline :
< video
src = {videoUrl}
webkit-playsinline =" true "
playsinline =" true "
/>Então, como lidar com navegadores com outros kernels? Neste momento, você precisa entender quais navegadores existem atualmente no mercado.
Primeiro de tudo, você precisa conhecer os quatro núcleos de navegadores atuais no mundo:
em:
Navegadores de PC domésticos comuns, como UC Browser, QQ Browser, Baidu Mobile Browser, 360 Secure Browser, Google Chrome, Sogou Mobile Browser, Cheetah Browser e UC móvel, QQ, Baidu e outros navegadores móveis têm kernels modificados com base no Webkit. , podemos pensar que os usuários móveis no mercado usam basicamente kernels de webkit ou navegadores modificados com base no kernel de webkit, então a compatibilidade do playinline é muito boa!
O elemento video fornece vários eventos comportamentais para os desenvolvedores controlarem a reprodução do vídeo. Aqueles com boa compatibilidade incluem onended , __ontimeupdate, onplay, onplaying, etc. __Alguns eventos se comportam de maneira inconsistente em navegadores e dispositivos diferentes.
Por exemplo: o monitoramento de ' canplay ' no iOS (se dados suficientes foram armazenados em buffer para uma reprodução suave) não será acionado durante o carregamento, mesmo que __preload="auto" __ seja inútil, mas no depurador do Chrome no PC Próximo, será acionado durante a fase de carregamento. ios precisa ser reproduzido antes de ser acionado.
Carregamento concluído:
Clique para jogar:
Carregamento concluído:
Clique para jogar
Carregamento concluído:
Clique para jogar:
Alguns eventos têm características de exibição inconsistentes em diferentes sistemas, dispositivos e navegadores, portanto, tome cuidado ao usá-los.
Com controles adicionados a este atributo, o Gecko fornecerá controles ao usuário, permitindo aos usuários controlar a reprodução do vídeo, incluindo volume, cruzamento de quadros e pausar/retomar a reprodução.
O atributo de controles especifica que o navegador deve fornecer controles de reprodução para o vídeo, caso contrário, os controles de reprodução ficarão ocultos, para que os desenvolvedores possam personalizar seus próprios controles de reprodução. Ocultar controles de reprodução tem boa compatibilidade em terminais móveis PC e IOS. No entanto, ocultar controles não é compatível com terminais móveis Android, mas ainda pode ser conseguido por meio de alguns métodos.
O método mais hackeado é ampliar o vídeo e mover a barra de controle para fora do campo de visão para obter o efeito oculto! Na verdade, o elemento de vídeo é maior que o contêiner pai, de modo que a barra de controle inferior ficará fora do contêiner pai e, em seguida, o contêiner pai será definido como: overflow: hidden, um método para ocultar os controles de reprodução! A desvantagem é que o vídeo será ampliado, sendo necessário deixar previamente um espaço em branco para ampliação.
A equipe do kernel x5 da equipe Android da Tencent relaxou as restrições à reprodução de vídeo. Os vídeos não necessariamente chamam seu reprodutor de vídeo muito criticado. Eles usam o atributo __x5-video-player-type = "h5" para ocultar elementos de controle. ao mesmo tempo __O vídeo não está mais no topo, permitindo que outros elementos flutuem no topo .
Depois de compreender os cenários comuns e as armadilhas comuns da reprodução de vídeo, podemos aprimorar a experiência do usuário, fornecendo soluções correspondentes para diferentes cenários. Por exemplo, a página H5 que é reproduzida automaticamente no terminal móvel pode acionar indiretamente a reprodução do vídeo, orientando os usuários a clicar ou deslizar. Esta é a abordagem mais conservadora, sem bugs! Uma solução melhor é reproduzir automaticamente por padrão e capturar a situação em que a reprodução é proibida e, em seguida, orientar o usuário na interação para obter a reprodução do vídeo.
usar vídeo No início, a reprodução de vídeo era severamente restrita no terminal móvel porque envolvia alto consumo de desempenho, alto consumo de tráfego e considerações de experiência do usuário. No entanto, com a melhoria do desempenho do telefone móvel, o advento da era do tráfego e uma cena mais forte. requisitos, as restrições foram gradualmente relaxadas, enquanto o lado do PC foi gradualmente Gradualmente, da “geração solta” à “geração restrita”, ambos estão constantemente atualizando suas estratégias com o objetivo de proporcionar aos usuários uma experiência melhor. No futuro, eles podem se tornar unificados e os desenvolvedores podem começar a partir da adaptação de compatibilidade subjacente. Libere-o para ter mais energia para realizar trabalhos de nível superior.
Se você está interessado em nossa equipe, pode acompanhar a coluna, seguir o github ou enviar seu currículo para 'tao.qit####alibaba-inc.com'.replace('####', '@'). Qualquer pessoa com ideais elevados é bem-vinda ~
Endereço original: https://github.com/ProtoTeam/blog/blob/master/201806/1.md
