Ao reproduzir vídeos sob o WeChat em telefones iOS e Android, você encontrará muitos problemas. .
Solução: Adicione alguns atributos ao vídeo e ligue para o vídeo nativo do H5.<ID do vídeo = VideoAll src = video/01.mp4 poster = imagens/1.jpg/*视频封面*/pré -ad = automático webkit-playsinline = true/*这个属性是 iOS 10 中设置可以让视频在小窗内播放, Isto é, é uma reprodução de tela cheia* / playsinline = true /* iOS WeChat Browser suporta pequenas janelas de reprodução* / x -webkit-airplay = permitir x5-video-player-type = h5 /* h5 player, que é WeChat Android. Valor é a tela vertical*/ style = objeto-files: preencher> </ video>POSTER = imagens/1.jpg: a imagem exibida quando o atributo especifica o download de vídeo ou a imagem exibida na frente do usuário, clique no botão Play. Se este atributo não estiver definido, use o primeiro quadro do vídeo. Pré -carga = automático: o atributo especifica o vídeo após o carregamento da página. Webkit-playsinline e playsinline: reprodução local durante a reprodução de vídeo, não deixe o fluxo de documentos. Mas esse atributo é mais especial. Em outras palavras, se o aplicativo não estiver definido, esse rótulo não será eficaz na sua página.
É necessário adicionar aqui. Necessidade porque a tela cheia é padrão. Mas, neste momento, a tela completa reproduzia controles, se você define o controle se você configurou. A transmissão ao vivo da transmissão ao vivo pode ser usada, mas o H5 de tela completa não é necessária; portanto, o controle do controle durante a reprodução de tela cheia requer as seguintes configurações: a mesma reprodução de camada.
X-webkit-airplay = permitir não pode conhecer sua função exatamente por enquanto, mas a Xiaobian especula que esse atributo deve fazer com que este vídeo suporta a função do AirPlay do iOS. O uso do AirPlay pode reproduzir vídeos, músicas e arquivos de fotos diretamente de diferentes locais no dispositivo do iOS. A reprodução também suporta as funções correspondentes. X5-Video-Player-Type: Ative o mesmo player H5 da camada, ou seja, quando a tela completa do vídeo, a div pode ser apresentada na camada de vídeo, que também é um atributo exclusivo da versão WeChat Android. Play Aliases na mesma camada também é chamado de reprodução imersiva. O atual jogador de mesmo nível entra apenas em vigor no Android (incluindo o WeChat) e não suporta o iOS por enquanto. Quanto ao porquê da mesma reprodução de camada apenas aberta ao Android, porque o Android não pode ser reproduzido como ISO, a tela completa padrão fará com que algumas operações de interface sejam bloqueadas. A mesma camada neste momento resolve esse problema. No entanto, durante o teste, verificou -se que diferentes versões dos efeitos ISO e Android eram um pouco diferentes. Orientação x5-video: declara a direção suportada pelo jogador, tela horizontal da paisagem opcional, tela vertical de retrato. O retrato de valor padrão. Tanto a transmissão ao vivo quanto o H5 de tela cheia são geralmente tocadas telas verticais, mas esse atributo requer o tipo X5-Video-Player para abrir o modo H5 X5-Video-Player-FullScreen: Configurações de tela cheia. Possui outros dois valores de atributo, Ture e False, a reprodução de tela completa, False não suporta reprodução de tela completa.De fato, o navegador ISO WeChat é o núcleo do Chrome, e os atributos relacionados são suportados, e é por isso que o X5 não é suportado pela mesma camada. O navegador Android WeChat é o kernel x5.
Há também um problema.
Solução: adicione o objeto: preencha; Se ainda houver bordas pretas, o tamanho do vídeo será inapropriado.<div id = videoBox> <ID do vídeo = videoAll src = mp4.mp4 poster = 1.jpg pré -ad = automático webkit-playsinline = true playsinline = true = permitir x5-video-player-type = h5 x5- video-player-fullscreen = True x5-video-orientação = estilo de retrato = objeto-ajuste: preencher> </video> <div id = playcontr ()> </div> </div> <div id = videoend> <div id = novamentebtn onclick = Playcontr ()> </div> </div>
*{Padding: 0; 100%100%; Antecedentes: Tampa; : -40.5px; 2. JPG); <Script> var videoAll = document.getElementById ('videoAll'), videoBox = document.getElementById ('videoBox'), btn = d ('btn'), videond = document.getElementById ('videoend'); .docmeEntelement.clientwidth; prevenir -se o estilo de função .Indexof ('adr')> -1; Terminal IOS PlayCr () {if (isandroid) {videoall.style.width = window.creen. = bloco; , Function () {VideoAlll .Pause ();O acima é a solução para a reprodução de reprodução completa do HTML5 WeChat que eu apresentou a você. Muito obrigado pelo seu apoio ao site VevB Wulin!