Tag de vídeo HTML5 que não funciona em Safari, iPhone e iPad
<video width="800" height="640" loop preload="false" autoplay controls tabindex="0">
<source src="xmasvideo/video.mp4" type="video/mp4" />
<source src="xmasvideo/M&P-Xmas 2.ogv" type="video/ogv" />
<source type="video/webm" src="xmasvideo/M&P-Xmas.webm" />
</video>
o vídeo está a funcionar bem no Chrome e no FireFox, mas não está a funcionar de todo nem no Safari no ecrã, nem no iPhone ou no iPad, a saída é simplesmente uma página em branco que mostra os controlos da marca de vídeo mas nada está carregado.
Note que a versão Safari que tenho suporta o vídeo HTML5
13 answers
Por alguma razão, os vídeos não tocariam no iPad a menos que eu definisse os controlos="true" flag.
Exemplo: isto funcionou para mim no iPhone, mas não no iPad.
<video loop autoplay width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>
E isto agora funciona tanto no iPad como no iPhone:
<video loop autoplay controls="true" width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>
O seu servidor web poderá não suportar os pedidos de byte-range HTTP. Este é o caso com o servidor web que estou usando, e o resultado é que o widget de vídeo carrega e um botão play aparece, mas clicando no botão não tem efeito. - O vídeo funciona em FF e Chrome, mas não em iPhone ou iPad.
Leia mais aqui em mobiforge.com acerca dos pedidos de byte-range, no Apêndice A: Streaming para o iphone Da Apple:
Primeiro, o navegador Safari pede o conteúdo, e se for um o ficheiro de áudio ou vídeo que abre é media player. O leitor multimédia solicita os dois primeiros bytes do conteúdo, para garantir que o O servidor web suporta pedidos de 'byte-range'. Então, se os apoiar, o o media player do iPhone pede o resto do conteúdo por byte-ranges e toca.
É melhor procurar na web por "iPhone mp4 byte-range".
Se os seus vídeos estiverem protegidos por um sistema de autenticação baseado em sessões, o Safari Não Os irá carregar. Isto porque o Safari faz um pedido inicial para o vídeo, em seguida, entrega a tarefa para QuickTime, o que faz outro pedido. Uma vez que o Safari contém a informação da sessão, ele passará a autenticação, mas o QuickTime não.
Pode ver isto se vir o seu registo de acesso ao servidor ... primeiro o pedido do Safari, depois o pedido do QuickTime. Outros navegadores apenas fazem um único pedido do próprio navegador.
Se este é o seu problema, você pode ter que refazer o acesso de vídeo para usar tokens temporários ou um acesso de tempo limitado a partir do pedido original. Vou actualizar esta resposta se encontrar uma solução mais directa.
Para pesquisas futuras também, eu tinha um ficheiro mp4 que eu diminuí com o travão de mão usando handbrake-gtk
de apt-get
, por exemplo sudo apt-get install handbrake-gtk
. No Ubuntu 14.04, o repositório handbrake
não inclui suporte para MP4 fora da caixa. Deixei as configurações padrão, tirei a faixa de áudio e ela gera um *.Ficheiro M4V. Para aqueles que se perguntam, eles são o mesmo contêiner, mas M4V é usado principalmente em iOS para abrir no iTunes.
Isso funcionou em todos os navegadores, exceto Safari:
<video preload="yes" autoplay loop width="100%" height="auto" poster="http://cdn.foo.com/bar.png">
<source src="//cdn.foo.com/bar-video.m4v" type="video/mp4">
<source src="//cdn.foo.com/bar-video.webm" type="video/webm">
</video>
Mudou o tipo mime entre video/mp4
e video/m4v
sem efeito. Eu também testei adicionando o atributo control
e novamente, sem efeito.
Isso funcionou em todos os navegadores testados, incluindo Safari 7 em Mavericks e Safari 8 em Yosemite. Eu simplesmente renomeei o mesmo arquivo m4v (o arquivo real, não apenas o HTML) para mp4 e reuploaded para o nosso CDN:
<video preload="yes" autoplay loop width="100%" height="auto" poster="http://cdn.foo.com/bar.png">
<source src="//cdn.foo.com/bar-video.mp4" type="video/mp4">
<source src="//cdn.foo.com/bar-video.webm" type="video/webm">
</video>
O Safari está à espera de um MP4. Nenhuma outra combinação de arquivo e tipo mime funcionou para mim. Acho que ... outros navegadores optam pelo arquivo WEBM primeiro, especialmente o Chrome, apesar de eu ter certeza que a lista de código deve selecionar a primeira fonte que é tecnicamente suportada.
Isto, no entanto, não corrigiu a emissão de vídeo em dispositivos iOS (iPad 3 "o novo iPad" e iPhone 6 testado).
Descobri que, embora o Safari suporte o vídeo HTML5, o jogador de Quicktime tem de ser instalado para que isto funcione. Em um site que eu construí que usa vídeo HTML5, o Usuário é alertado ao usar Safari, dizendo-lhes que eles devem ter Quicktime instalado, caso contrário eles só serão capazes de ver transcrições de vídeo. Espero que isto ajude.
Para testar você pode implantar o vídeo em outro lugar-ou mudar para http (para toda a página) e ele deve reproduzir.
Basta adicionar um atributo {[[0]} e tudo vai funcionar bem.
A fonte desta resposta está aqui: https://webkit.org/blog/6784/new-video-policies-for-ios/
Por omissão, o WebKit terá as seguintes políticas:
<video autoplay>
os elementos irão agora honrar o atributo autoplay, para os elementos que satisfazem as seguintes condições:
<video>
os elementos serão autorizados a jogar automaticamente sem um gesto do utilizador se o seu meio de origem não contém faixas de áudio.<video muted>
os elementos também poderão ser autoplay sem um gesto do utilizador.- Se um elemento
<video>
ganha uma faixa de áudio ou se torna não-mudo sem um gesto do utilizador, a reprodução irá parar.<video autoplay>
os elementos só começarão a tocar quando forem visíveis na tela, como quando forem rodados para a área de visualização, tornados visíveis através do CSS, e inseridos no DOM.<video autoplay>
os elementos irão parar se se tornarem não visíveis, como por exemplo: a ser expulso da viewport.
<video>
elementos irão agora honrar o método de jogo (), para os elementos que satisfazem as seguintes condições:
<video>
os elementos serão autorizados a reproduzir () sem um gesto do utilizador se o seu suporte de origem não contiver faixas de áudio, ou se a sua propriedade silenciada for verdadeira.- Se um elemento
<video>
ganha uma faixa de áudio ou se torna não-mudo sem um gesto do utilizador, a reprodução irá parar.- Vídeo.play() irá retornar uma promessa, que será rejeitada se alguma destas condições não forem cumpridas.
<video>
os elementos serão permite-se jogar() quando não é visível no ecrã ou quando está fora do ecrã.No iPhone,
<video playsinline>
Os elementos serão agora autorizados a tocar em linha, e não entrarão automaticamente no modo de ecrã completo quando a reprodução começar.<video>
os elementos sem atributos de playsinline continuarão a necessitar do modo de ecrã completo para reprodução no iPhone. Ao sair do ecrã completo com uma pinça gesto,<video>
os elementos sem playsinline continuarão a jogar online.
Eu tinha o mesmo problema com dispositivos da apple como o iPhone e o iPad, desliguei o modo de baixo consumo e funcionou e você também deve incluir o atributo playinline em tag de vídeo como este
<video class="video-background" autoplay loop muted playsinline>
"A Apple tomou a decisão de desativar a reprodução automática de vídeo em dispositivos iOS, através de implementações de script e atributos.
No Safari, no iOS( para todos os dispositivos, incluindo o iPad), onde o utilizador pode estar numa rede celular e ser cobrado por unidade de dados, pré-carregamento e auto-jogo estão desactivados. Não são carregados dados até que o usuário inicie."
Pode ler mais sobre isto nesta documentação da Apple.
Para um. mp4 isto funciona (safari mobile & desktop):
<video height="250" width="250" controls>
<source src="video.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
O {[[1]} mencionado em um post acima não fazer nenhuma diferença para mim como a Apple diz apenas usar controles por conta própria.
Referência: " para usar áudio ou vídeo HTML5, comece por criar um ou elemento, especificando um URL de origem para o meio, e incluindo o atributo controls.
<video src="http://example.com/path/mymovie.mp4" controls></video>
"
Nas minhas relações (uma pequena digressão ) : Descobri que o envio de vídeo do iPhone o envia para o servidor as .video. Ironicamente, este é o problema ao tentar reproduzir o vídeo do servidor no safari. (mobile & desktop).
Então se (como eu ) você está experimentando A.quicktime ( ou qualquer outra coisa than. mp4) problema em safari , Aqui está um trabalho fornecido pela apple. Nota, ainda estou para testá-lo eu mesmo e não estou muito feliz com ele em um olhar, apenas fornecendo mais informações.
Referência:
"Volte para o plug-in QuickTime há uma maneira simples de voltar para o plug-in QuickTime que funciona para quase todos os navegadores-baixe o arquivo JavaScript pré-construído fornecido pela Apple, ac_quicktime.js, a partir de exemplo de vídeo HTML e incluí - lo em sua página web, inserindo o seguindo a linha de código na sua cabeça HTML: <script src="ac_quicktime.js" type="text/javascript"></script>
"
Update: For .quicktime mudar o nome para .mov
antes do envio para o servidor ( no ficheiro base64 "data:video/mov;" ), ignorar ac_ Quicktime.js . . . irá então trabalhar em tag de vídeo html; Hackerdy Hack.
Em ubuntu:
ffmpeg -i input.mp4 -vcodec copy -an output.mp4
E o safari/ecrã começa a reproduzir o vídeo