A tag de vídeo HTML5 não funciona no Safari, iPhone e iPad

Estou tentando criar uma página da web html5 na qual há um pequeno vídeo como 13s, converti a versão em flash deste vídeo para o formato 3: .ogv usando fireFogg, .webm usando firefogg também e .mp4 usando o aplicativo HandBrake o script html Eu usei na minha página:

<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á funcionando bem no Chrome e FireFox, mas não funciona nem no Safari no Desktop nem no iPhone ou iPad, a saída é simplesmente uma página em branco que mostra os controles da tag de vídeo, mas nada é carregado

Observe que a versão do Safari que possuo é compatível com vídeo HTML5

Eu tive o mesmo problema com dispositivos Apple como iPhone e iPad, desliguei o modo de baixo consumo de energia e funcionou e você também deve incluir o playsinlineatributo na tag de vídeo como este:

<video class="video-background" autoplay loop muted playsinline>

Só funcionou quando incluído playsinline.

Outra solução possível para os pesquisadores futuros: (se o seu problema não for um problema do tipo MIME.)

Por algum motivo, os vídeos não seriam reproduzidos no iPad a menos que eu configurasse a sinalização controles = "true".

Exemplo: 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 isso agora funciona no iPad e no iPhone:

<video loop autoplay controls="true" width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>

Seu servidor da web pode não suportar solicitações de intervalo de bytes HTTP. Esse é o caso do servidor da web que estou usando e o resultado é que o widget de vídeo é carregado e um botão de reprodução aparece, mas clicar 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 sobre solicitações de intervalo de bytes, no Apêndice A: Streaming para Apple iPhone :

Primeiro, o navegador Safari solicita o conteúdo e, se for um arquivo de áudio ou vídeo, abre seu reprodutor de mídia. O reprodutor de mídia então solicita os primeiros 2 bytes do conteúdo, para garantir que o servidor da Web ofereça suporte a solicitações de intervalo de bytes. Então, se for compatível, o media player do iPhone solicita o resto do conteúdo por intervalos de bytes e o reproduz.

Você pode pesquisar na web por "iphone mp4 byte-range".

Se os seus vídeos estiverem protegidos por um sistema de login baseado em sessão, o Safari não conseguirá carregá-los. Isso ocorre porque o Safari faz uma solicitação inicial para o vídeo e, em seguida, passa a tarefa para o QuickTime, que faz outra solicitação. Como o Safari contém as informações da sessão, ele passará na autenticação, mas o QuickTime não.

Você pode ver isso se visualizar o registro de acesso ao servidor ... primeiro a solicitação do Safari, depois a solicitação do QuickTime. Outros navegadores apenas fazem uma única solicitação do próprio navegador.

Se este for o seu problema, talvez você precise retrabalhar o acesso ao vídeo para usar tokens temporários ou um acesso por tempo limitado da solicitação original. Atualizarei esta resposta se encontrar uma solução mais direta.

Para pesquisas futuras, bem, eu tinha um arquivo MP4 que eu downscaled com Handbrake usando handbrake-gtka partir apt-get, por exemplo sudo apt-get install handbrake-gtk. No Ubuntu 14.04, o handbrakerepositório não inclui suporte para MP4 fora da caixa. Eu deixei as configurações padrão, retirei a trilha de áudio e gerou um arquivo * .M4V. Para quem está se perguntando, eles são o mesmo contêiner, mas o M4V é usado principalmente no 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>

Mudei o tipo mime entre video/mp4e video/m4vsem efeito. Eu também testei adicionando o controlatributo e novamente, nenhum efeito.

Isso funcionou em todos os navegadores testados, incluindo Safari 7 no Mavericks e Safari 8 no Yosemite. Simplesmente renomeei o mesmo arquivo m4v (o arquivo real, não apenas o HTML) para mp4 e recarreguei em 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>

Acho que o Safari está esperando um MP4 realmente nomeado. Nenhuma outra combinação de arquivo e tipo MIME funcionou para mim. Acho que os outros navegadores optam pelo arquivo WEBM primeiro, especialmente o Chrome, embora eu tenha quase certeza de que a lista de fontes deve selecionar a primeira fonte que é tecnicamente suportada.

Isso, entretanto, não corrigiu o problema de vídeo em dispositivos iOS (iPad 3 "o novo iPad" e iPhone 6 testados).

Basta adicionar um mutedatributo e tudo funcionará bem.

A fonte desta resposta está aqui: https://webkit.org/blog/6784/new-video-policies-for-ios/

Por padrão, o WebKit terá as seguintes políticas:

<video autoplay> os elementos agora respeitarão o atributo autoplay, para elementos que atendam às seguintes condições:

• <video> os elementos terão permissão para reproduzir automaticamente sem um gesto do usuário se a mídia de origem não contiver faixas de áudio.
• <video muted> os elementos também poderão ser reproduzidos automaticamente sem um gesto do usuário.
• Se um <video>elemento ganha uma faixa de áudio ou torna-se sem som sem um gesto do usuário, a reprodução será pausada.
• <video autoplay> os elementos só começarão a ser reproduzidos quando estiverem visíveis na tela, como quando rolados na janela de visualização, tornados visíveis por meio de CSS e inseridos no DOM.
• <video autoplay> os elementos farão uma pausa se se tornarem invisíveis, como ao serem rolados para fora da janela de visualização.

<video> os elementos agora respeitarão o método play (), para os elementos que atendem às seguintes condições:

• <video> os elementos terão permissão para reproduzir () sem um gesto do usuário se a mídia de origem não contiver faixas de áudio ou se a propriedade muted estiver definida como true.
• Se um <video>elemento ganha uma faixa de áudio ou torna-se sem som sem um gesto do usuário, a reprodução será pausada.
• <video> os elementos poderão ser reproduzidos () quando não estiverem visíveis na tela ou fora da janela de visualização.
• video.play () retornará uma promessa, que será rejeitada se alguma dessas condições não for atendida.

No iPhone, os <video playsinline>elementos agora podem ser reproduzidos em linha e não entrarão automaticamente no modo de tela inteira quando a reprodução começar. <video>elementos sem atributos PlayInline continuarão a exigir o modo de tela cheia para reprodução no iPhone. Ao sair da tela <video>inteira com um gesto de pinça, os elementos sem reproduções inline continuarão sendo reproduzidos inline.

Eu descobri que, embora o Safari suporte HTML5 Video, o Quicktime Player deve ser instalado para que funcione. Em um site que eu construí que usa vídeo HTML5, o usuário é alertado ao usar o Safari, informando que ele deve ter o Quicktime instalado, caso contrário, ele só poderá ver as transcrições do vídeo. Espero que isto ajude.

Já vi problemas estranhos com certificados SSL de 'desenvolvimento' não confiáveis, em que o Safari móvel servirá perfeitamente à sua página, mas se recusará a servir um vídeo para um certificado SSL 'falso', mesmo que você tenha aceitado o certificado.

Para testar, você pode implantar o vídeo em outro lugar - ou mudar para http (para toda a página) e ele deve ser reproduzido.

Adicionar 'playinline' funciona para mim no Iphone e no Ipa, se você não se importa que seu vídeo seja silenciado.

<video muted playsinline>
  <source src="..." type="video/mp4">
</video>

Se você não deseja que seu vídeo seja silenciado, mas ainda deseja a reprodução automática, tente remover o atributo mudo com js: Como ativar o som de um vídeo html5 com um suporte silenciado

A partir do iOS 6.1, não é mais possível reproduzir vídeos automaticamente no iPad. De acordo com a documentação da Apple, o recurso de reprodução automática não está funcionando no Safari em todos os dispositivos ios, incluindo iPad:

“A Apple decidiu desativar a reprodução automática de vídeo em dispositivos iOS, por meio de implementações de script e atributo.

No Safari, no iOS (para todos os dispositivos, incluindo iPad), onde o usuário pode estar em uma rede celular e ser cobrado por unidade de dados, o pré-carregamento e a reprodução automática estão desabilitados. Nenhum dado é carregado até que o usuário o inicie. "

Você pode ler mais sobre isso nesta documentação da Apple

Para um .mp4, isso funciona (safari móvel e desktop):

<video height="250" width="250" controls>
    <source src="video.mp4" type="video/mp4" />
    Your browser does not support the video tag.
</video>

O controls=”true”mencionado em um post acima não faz sentido para mim, pois a Apple diz que basta usar os controles por conta própria.

Referência: “Para usar áudio ou vídeo HTML5, comece criando um elemento ou, especificando um URL de origem para a mídia e incluindo o atributo de controles. <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

Em minhas negociações (uma pequena digressão) : descobri que fazer upload de vídeo do iPhone o envia para o servidor como .quicktime. Ironicamente, esse é o problema ao tentar reproduzir o vídeo do servidor no Safari. (celular e desktop).

Portanto, se (como eu) você estiver enfrentando um problema de .quicktime (ou qualquer coisa diferente de .mp4) no safari , aqui está uma solução alternativa fornecida pela apple. Observe, eu ainda estou para testá-lo e não estou muito feliz com isso à primeira vista, apenas fornecendo mais informações.

Referência: “Voltar 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, do HTML Video Example e inclua-o em sua página da web, inserindo a seguinte linha de código em seu cabeçalho 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

Atualização: Para renomear .quicktime para .movupload anterior para o servidor (no tipo de arquivo base64 "data: video / mov;"), pule ac_quicktime.js. . . funcionará então na tag de vídeo html; Hackerdy ​​Hack.

Ao usar este código, o vídeo será reproduzido em todos os navegadores do Safari e também em dispositivos iOS ... Vá em frente, todos (eu usei isso e está funcionando bem)

`

<video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
    	<source src="video/video.mp4" type="video/mp4"></source>
		<source src="video/video.webm" type="video/webm"></source>
		<source src="video/video.mov" type="video/mov"></source>
</video>

`

Eu tive um problema semelhante onde os vídeos dentro de uma <video>tag só eram reproduzidos no Chrome e Firefox, mas não no Safari. Aqui está o que eu fiz para consertar ...

Um truque estranho que descobri foi ter duas referências diferentes para o seu vídeo, uma em uma <video>tag para Chrome e Firefox e outra em uma <img>tag para Safari. Curiosidade, os vídeos realmente são reproduzidos em uma <img>tag no Safari. Depois disso, escreva um script simples para ocultar um ou outro quando um determinado navegador estiver em uso. Então, por exemplo:

<video id="video-tag" autoplay muted loop playsinline> 
    <source src="video.mp4" type="video/mp4" />  
</video>
<img id="img-tag" src="video.mp4">

<script type="text/javascript">
    function BrowserDetection() {

    //Check if browser is Safari, if it is, hide the <video> tag, otherwise hide the <img> tag
    if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0) {
        document.getElementById('video-tag').style.display= "none";
    } else {
        document.getElementById('img-tag').style.display= "none";
    }               

    //And run the script. Note that the script tag needs to be run after HTML so where you place it is important. 
    BrowserDetection();
</script>

Isso também ajuda a resolver o problema de uma moldura / borda preta fina em alguns vídeos em certos navegadores onde eles são renderizados incorretamente.

Eu tive esse problema em que a reprodução de .mp4 no Safari não funcionava, mas em outros navegadores estava bem. O erro que eu estava vendo no console era: error media src not supported. No meu caso, isso acabou sendo um problema de tipo MIME, mas não porque não foi declarado como tipo MIME no IIS, em vez disso, foi declarado duas vezes (uma vez no IIS e também em um arquivo web.config). Eu descobri isso tentando baixar o arquivo .mp4 localmente no servidor. Removi o arquivo de configuração do local do conteúdo que estava tentando reproduzir e resolvi o problema. Eu poderia simplesmente ter excluído o tipo MIME do arquivo web.config, mas, neste caso, o arquivo web.config não era necessário.

Para IOS, use apenas o arquivo de origem mp4. Eu observei um problema no navegador safari mais recente em que o navegador safari não consegue detectar o arquivo de origem corretamente e, por causa disso, a reprodução automática de vídeo não funciona.

Vamos verificar o exemplo abaixo -

     <video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
        <source src="video/video.mp4" type="video/mp4"></source>
        <source src="video/video.webm" type="video/webm"></source>
     </video>

Como tenho usado mp4, webm em arquivos fonte. Safari deosnt suporta webm, mas ainda na última versão do safari, ele selecionaria webm e falha na reprodução automática de vídeo.

Portanto, para trabalhar a reprodução automática em um navegador compatível, sugiro que verifique o navegador primeiro e, com base nisso, você deve gerar seu html.

Portanto, para safari, use o html abaixo.

     <video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
        <source src="video/video.mp4" type="video/mp4"></source>
     </video>

Para além do safari,

     <video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
        <source src="video/video.webm" type="video/webm"></source>
        <source src="video/video.mp4" type="video/mp4"></source>
     </video>

Eu tive o mesmo problema - certifique-se de que o url do recurso de vídeo vem de um domínio seguro. Nosso ambiente de desenvolvimento é http enquanto a produção é segura. Devido ao vídeo ser referenciado por meio de um caminho relativo, ele não estava funcionando no desenvolvimento. Parece ser um problema que a apple exige que o vídeo seja seguro ...

está funcionando, mas o MacOs recentemente tem uma política de reprodução automática para o usuário: https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/ , resolvi o mesmo problema usando um botão para ativar o som:

ejm:

<video autoplay loop muted id="myVideo">
  <source src="amazon.mp4" type="video/mp4">
  Sorry, your browser doesn't support embedded videos...
</video>

<button class="pausee" onclick="disableMute()" type="button">Enable sound</button>

<script>
var vid = document.getElementById("myVideo");
function disableMute() { 
  vid.muted = false;
}
</script>

Eu enfrentei o mesmo problema. Porque o tamanho do quadro do meu vídeo era muito grande. ie.2248 px Apple com suporte para vídeo H.264 Baseline Profile Level 3.0, até 640 x 480 a 30 fps. Observe que os quadros B não são suportados no perfil Baseline. verifique isto para obter mais informações

O que ajudou no meu caso foi descartar a faixa de áudio. Estava silencioso antes, mas tinha que sumir completamente.

No ubuntu:

ffmpeg -i input.mp4 -vcodec copy -an output.mp4

E safari / desktop começa a reproduzir o vídeo

Para meu caso de uso, havia duas coisas :

1. Eu não estava usando a nova política de atributo / webkit playsinline ;
2. Meu vídeo / tipo mime ou whathathell não foi codificado corretamente, então usei este site para convertê-lo em todos os formatos de que precisava: https://pt.converterpoint.com/

o /

Eu tive exatamente o mesmo problema, minha tag de vídeo HTML funcionou bem no Chrome e Mozilla, no Safari - os controles apareceram, mas o vídeo estava em branco. Tentei jogar com todos os atributos acima, remover / adicionar silenciado, playInline, etc. e nada funcionou. O problema estava com os servidores descritos aqui também. Eu tinha isso - NÃO FUNCIONOU:

<video 
  muted
  playsInline
  controls
  style={{ width: `100%` }}>
  <source src={MfMfVideo} type="video/mp4" />
  <source src={MfMfVideoWebM} type="video/webm" />
</video>

e acabei de mover meu vídeo para uma biblioteca externa e estou bem no Safari agora, ele FUNCIONA bem:

<video 
  muted
  playsInline
  controls 
  style={{ width: `100%` }}>
  <source src={"https://blabla.com/video/dixneuf-video_r8xuvc.mp4"} type="video/mp4" />
  <source src={"https://blabla.com/videodixneuf-video_gyquuu.webm"} type="video/webm" />
  Sorry, your browser doesn't support embedded videos.
</video>

Nada funcionou para mim, exceto compactar o vídeo para menos de 30 MB. Isso funcionou, mas com uma compressão muito ruim.

Se alguém tendo o mesmo problema eu resolvi habilitando o suporte de intervalo de bytes no meu servidor. Parece que o Safari requer solicitações de intervalo de bytes. No meu caso, eu uso o NGINX e tive que adicionar proxy_force_ranges on;ao meu arquivo de configuração. Graças a esta resposta !