Tag de vídeo HTML5 que não funciona em Safari, iPhone e iPad

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>

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.
• <video> os elementos serão permite-se jogar() quando não é visível no ecrã ou quando está fora do ecrã.
Vídeo.play() irá retornar uma promessa, que será rejeitada se alguma destas condições não forem cumpridas.

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>"

Fonte : https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Introduction/Introduction.html

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>"

Fonte: https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP40009523-CH2-SW6

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