Uma breve discussão sobre como preencher as armadilhas do vídeo HTML5 em terminais móveis

Este artigo apresenta o terminal móvel de vídeo HTML5, preenchendo as armadilhas e compartilhando-o com todos. Os detalhes são os seguintes:

 <video id=video style=object-fit:fill autoplay webkit-playsinline playinline x5-video-player-type=h5 x5-video-player-fullscreen=true x5-video-orientation=portraint src=video.mp4 />< /video><!-- object-fit: fill O conteúdo do vídeo preenche todo o contêiner de vídeo poster:img.jpg Reprodução automática da capa do vídeo: Reprodução automática automática - Carregar o vídeo inteiro quando a página carregar meta - Carregar apenas os metadados quando a página não carregar nenhum - Não carregar o vídeo quando a página carregar mudo: Quando este atributo é definido, ele especifica que a saída de áudio do vídeo deve ser silenciada webkit -playsinline playsinline: reprodução inline x5-video-player-type=h5: habilita x5 core H5 player x5-video-player-fullscreen=true configuração de tela cheia. As configurações de verdadeiro e falso levarão a layouts diferentes. x5-video-orientation=portraint: declara a direção suportada pelo player. Os valores opcionais são tela horizontal horizontal e tela vertical vertical. Retrato de valor padrão. Quer seja transmissão ao vivo ou H5 em tela cheia, geralmente é reproduzido verticalmente, mas este atributo requer x5-video-player-type para ativar o modo H5 ->

 <reprodução automática de vídeo></video>

No entanto, em muitos navegadores móveis, a operação real do usuário (eventos padrão, como eventos touchend, click, doubleclick ou keydown) é necessária para acionar a chamada para video.play() para reproduzir áudio e vídeo automaticamente.

 dom.addEventListener('clique', função () { video.play()})

Video.play() também pode ser acionado em wx.ready()

 wx.ready (função () { vídeo.play ()})

Defina a propriedade webkit-playsinline playinline

 <video id=video webkit-playsinline playinline /></video>

Ao reproduzir vídeos no iOS Safari e em alguns navegadores Android, o vídeo não pode ser reproduzido na página h5 e o sistema assumirá automaticamente o controle do vídeo.

Se você precisar reproduzir um vídeo em uma página h5, será necessário adicionar webkit-playsinline à tag de vídeo. Após o iOS 10, é necessário adicionar playsinline. O aplicativo também precisa oferecer suporte a esse modo.

 webview.allowsInlineMediaPlayback = SIM;

Tanto o iOS Mobile QQ quanto o WeChat suportam esse modo, mas o Android WeChat desliga.

O navegador integrado do Android WeChat usa o kernel Tencent X5 e não segue o padrão X5web. Um deles é o vídeo em tela cheia forçado. Depois que o vídeo for reproduzido, as recomendações de vídeo do próprio QQ aparecerão.

Diz-se que possui uma lista de permissões e os recursos de vídeo na lista de permissões não estarão em tela cheia. Mas a Tencent não pode mais adicionar itens à lista de permissões. Urinário, sem solução. . . . . .

Atualmente existe uma solução, que é usar o h5 canvas para reproduzir vídeo

Armadilhas encontradas ao usar o canvas: video deve adicionar o atributo x5-video-player-type=h5, caso contrário, o vídeo ficará preso no terminal móvel e não poderá ser reproduzido. Pessoalmente, acho que é porque o vídeo foi assumido.

 <div class=wrapper> <video id=video style=display: nenhum autoplay src=video.mp4 x5-video-player-type=h5></video> <canvas id=canvas></canvas></div> <script> var video = document.querySelector('#video') var canvas = document.querySelector('#canvas') var wrapper = canvas.parentNode var width = wrapper.offsetWidth var height = wrapper.offsetHeight var ctx = c.getContext('2d') var time = null canvas.width = largura canvas.height = altura canvas.addEventListener('click', function () { video.play( ) }) video.addEventListener('play', function () { time = window.setInterval(function () { ctx.drawImage(v, 0, 0, largura, altura); , função () { window.clearInterval(tempo }, falso);</script>

Por fim, descobriu-se que, embora o canvas seja usado para reproduzir vídeos, os vídeos recomendados após a reprodução em tela cheia podem ser bloqueados no Android WeChat. Mas não há como desativar o problema de tela cheia ao reproduzir vídeos. Ainda pegue a lista branca do mal. Faça reclamações. . . . . . . . . . . . . . . .

O que é ainda mais irritante é que não encontrei uma maneira de acionar a saída de tela inteira via js.

Ao reproduzir um vídeo no iOS, uma tela preta aparecerá brevemente e depois será exibida normalmente.

Solução:

Adicione um div acima do vídeo e preencha-o com uma imagem para criar a ilusão de carregar antes de reproduzir. Em seguida, ouça o evento timeupdate e remova este bloco div quando o vídeo estiver sendo reproduzido.

 video.addEventListener('timeupdate', function(){ if(video.currentTime > 0.1){ posterImg.hidden(); }})

HTMLVideoElement e HTMLAudioElement herdam de HTMLMediaElement

 //Erro de mídia MediaObj.error; //nulo: MediaObj.error.code normal; //1. Encerramento do usuário 2. Erro de rede 3. Erro de decodificação 4. URL inválido //O estado atual da mídia MediaObj.currentSrc; /Retornar ao recurso atual URLMediaObj.src = value; //Retornar ou definir o recurso atual URLMediaObj.canPlayType(type); //Se os recursos em um determinado formato podem ser reproduzidos MediaObj.networkState; //0. Este elemento não foi inicializado 1. Normal, mas não está usando a rede 2. Os dados estão sendo baixados 3. O recurso MediaObj.load() não foi encontrado; //Recarrega o recurso especificado por src MediaObj.buffered; Retorne à área de buffer, TimeRangesMediaObj.preload; //none: não pré-carrega metadados: pré-carrega informações do recurso auto://ready state MediaObj.readyState; //2:HAVE_METADATA //3.HAVE_CURRENT_DATA //4.HAVE_FUTURE_DATA //5.HAVE_ENOUGH_DATAMediaObj.seeking; //Se está buscando //Status de reprodução MediaObj.currentTime = //A posição de reprodução atual, a atribuição pode alterar o valor; posição MediaObj.startTime; //Geralmente 0, se for streaming de mídia ou um recurso que não começa em 0, não é 0MediaObj.duration //O fluxo de comprimento do recurso atual retorna infinito MediaObj.paused //Se deve ser pausado MediaObj.defaultPlaybackRate = valor; ; //Padrão Para velocidade de reprodução, você pode definir MediaObj.playbackRate = value; //Velocidade de reprodução atual, altere-a imediatamente após definir MediaObj.played; //Retorna a área que foi reproduzida, TimeRanges, veja abaixo para este objeto MediaObj.seekable //Retorna a área que pode ser buscada TimeRangesMediaObj.ended //Se deseja finalizar MediaObj.autoPlay; .loop; //Sim Loop play MediaObj.play(); //Pausa//Controle de vídeo MediaObj.controls;//Se existe uma barra de controle padrão MediaObj.volume = value //Volume MediaObj.muted = value; /Região Número de segmentos TimeRanges.start(index) //Posição inicial da área do segmento de índice TimeRanges.end(index) //A posição final da seção de índice //[★★★**Eventos relacionados**★★★]//Distribuição de eventos var eventTester = function(e){ Media.addEventListener(e, function(){ console.log ((new Date()).getTime(),e) },false);}//Monitoramento de eventos eventTester(loadstart); //O cliente começa a solicitar dados eventTester(progress); //O cliente está solicitando dados eventTester(suspend); //Atraso no download eventTester(abort); //O cliente encerra ativamente o download (não causado por um erro) eventTester(loadstart); progress); //O cliente está solicitando dados eventTester(suspend); //Atraso no download eventTester(abort); //O cliente encerra ativamente o download (não devido a um erro), eventTester(error); //Um erro foi encontrado ao solicitar dados eventTester(stalled); //Velocidade da rede interrompida eventTester(play); //EventTester(pause) é acionado quando play() e autoplay iniciam a reprodução; ); //Comprimento do recurso obtido com sucesso eventTester(loadeddata); //eventTester(waiting); //Aguardando dados, não um erro eventTester(playing); //Iniciar a reprodução eventTester(canplay); //Pode reproduzir, mas pode ser pausado devido ao carregamento eventTester(canplaythrough); //Pode reproduzir, todas as músicas foram carregadas eventTester(seeking); /Encontrando eventTester(timeupdate); //Tempo de reprodução alterado eventTester(ended); //Reprodução finalizada eventTester(ratechange); //Alterações no tamanho do recurso eventTester(volumechange); //Alterações no volume

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.