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

Question 1

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

Question 2

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 `playsinline`atributo na tag de vídeo como este:

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

Só funcionou quando incluído playsinline.

Question 3

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>

Question 4

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

Question 5

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.

Question 6

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).

Question 7

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.

Question 8

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.

Question 9

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.

Question 10

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

Question 11

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

Question 12

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.

Question 13

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>

Expandir trecho

`

Question 14

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.

Question 15

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.

Question 16

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>

Question 17

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

Question 18

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>

Expandir trecho

Question 19

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

Question 20

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

Question 21

Para meu caso de uso, havia duas coisas :

Eu não estava usando a nova política de atributo / webkit playsinline ;
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 /

Question 22

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>

Question 23

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

Question 24

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 !

Answer 1

91

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

iphone ipad safari html5-video mobile-safari Khaled Al Hage Ismail
fonte

Aparentemente, é um problema do MimeType Verifique este link para obter mais informações. Encontrei-o aqui Tenha um bom dia :)

James Dayeh

1

bom observar que o vídeo no ios nunca faz autoplay: developer.apple.com/library/safari/documentation/AudioVideo/… ..

commonpike

2

Você tentou o atributo playsinlinena tag de vídeo?

Humayun kabir

Answer 2

Aparentemente, é um problema do MimeType Verifique este link para obter mais informações. Encontrei-o aqui Tenha um bom dia :)

James Dayeh

Answer 3

1

bom observar que o vídeo no ios nunca faz autoplay: developer.apple.com/library/safari/documentation/AudioVideo/… ..

commonpike

Answer 4

2

Você tentou o atributo playsinlinena tag de vídeo?

Humayun kabir

Answer 5

86

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 `playsinline`atributo na tag de vídeo como este:

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

Só funcionou quando incluído playsinline.

parag patel
fonte

3

Não queríamos mostrar os controles de vídeo, embora isso fizesse com que funcionasse em iphones para nós, mas adicionar "playsinline" funcionou perfeitamente e fez com que funcionasse em iphones e em todos os outros dispositivos sem mostrar os controles. Resposta perfeita!

Erica Summers

10

Nota para quem usa React: você precisará usar playsInline, em camelCase.

Ethan Ryan

6

Esta é realmente a melhor resposta aqui.

RubyFanatic

isso funciona 100% .. Percebi que o problema não é apenas o navegador em si, e não iPhones em geral, porque meu vídeo não estava sendo reproduzido em outros navegadores em iPhones

noel293

Answer 6

3

Não queríamos mostrar os controles de vídeo, embora isso fizesse com que funcionasse em iphones para nós, mas adicionar "playsinline" funcionou perfeitamente e fez com que funcionasse em iphones e em todos os outros dispositivos sem mostrar os controles. Resposta perfeita!

Erica Summers

Answer 7

10

Nota para quem usa React: você precisará usar playsInline, em camelCase.

Ethan Ryan

Answer 8

6

Esta é realmente a melhor resposta aqui.

RubyFanatic

Answer 9

isso funciona 100% .. Percebi que o problema não é apenas o navegador em si, e não iPhones em geral, porque meu vídeo não estava sendo reproduzido em outros navegadores em iPhones

noel293

Answer 10

44

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>

Niknak
fonte

Este foi o problema para mim também ... nada funcionou até adicionar o atributo de controles à tag de vídeo.

Bishbulb

Isso funcionou perfeitamente para mim. Para futuros leitores, estou incorporando um mp4 usando a tag de vídeo que @niknak postou acima. Obrigado!

Jon

1

Para mim, adicionar a autoplayopção funcionou. Eu tenho controls="false"em meu código.

Hozefa

1

@Hozefa controls="false"é redundante; controlsem si é um booleano que, quando presente, ativa os controles e, quando não está, não há controles. Ver especificações

fahad

1

Além disso, como controlsé um atributo booleano, os únicos valores válidos são nenhum, uma string vazia ou seu próprio nome. Os valores verdadeiro e falso estão incorretos.

Ian Devlin

Answer 11

Este foi o problema para mim também ... nada funcionou até adicionar o atributo de controles à tag de vídeo.

Bishbulb

Answer 12

Isso funcionou perfeitamente para mim. Para futuros leitores, estou incorporando um mp4 usando a tag de vídeo que @niknak postou acima. Obrigado!

Jon

Answer 13

1

Para mim, adicionar a autoplayopção funcionou. Eu tenho controls="false"em meu código.

Hozefa

Answer 14

1

@Hozefa controls="false"é redundante; controlsem si é um booleano que, quando presente, ativa os controles e, quando não está, não há controles. Ver especificações

fahad

Answer 15

1

Além disso, como controlsé um atributo booleano, os únicos valores válidos são nenhum, uma string vazia ou seu próprio nome. Os valores verdadeiro e falso estão incorretos.

Ian Devlin

Answer 16

32

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

KajMagnus
fonte

1

Aqui está outro bom recurso para configurar seu servidor para suportar solicitações de intervalo de bytes .

Alex Cory

Esse era o meu problema. Estou usando o Flask com chamadas 'send_file' e 'send_from_directory'. Tive de adicionar o argumento 'condicional = True' a essas chamadas.

Joost

Esta resposta se aplica a mim e funcionou na minha implementação do Play Framework (2.7) Use RangeResult.ofPath(finalPath, range, Some(mime))e deve funcionar 2.7 e posteriores.

Manabu Tokunaga

PS: Esqueci de adicionar como obter o intervalo. Essa é a chamada. Ele vem como "Range" `val range = request.headers.get (" Range ")`

Manabu Tokunaga

Answer 17

1

Aqui está outro bom recurso para configurar seu servidor para suportar solicitações de intervalo de bytes .

Alex Cory

Answer 18

Esse era o meu problema. Estou usando o Flask com chamadas 'send_file' e 'send_from_directory'. Tive de adicionar o argumento 'condicional = True' a essas chamadas.

Joost

Answer 19

Esta resposta se aplica a mim e funcionou na minha implementação do Play Framework (2.7) Use RangeResult.ofPath(finalPath, range, Some(mime))e deve funcionar 2.7 e posteriores.

Manabu Tokunaga

Answer 20

PS: Esqueci de adicionar como obter o intervalo. Essa é a chamada. Ele vem como "Range" `val range = request.headers.get (" Range ")`

Manabu Tokunaga

Answer 21

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.

Answer 22

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).

Answer 23

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.

Answer 24

4

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.

TobyS
fonte

Esta resposta não está mais atualizada.

jor

Answer 25

Esta resposta não está mais atualizada.

jor

Answer 26

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.

Answer 27

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

Answer 28

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

Answer 29

1

Isso não tenta responder à pergunta de nenhuma forma e pode ser útil como um comentário. A questão era sobre os vídeos não serem reproduzidos e não tem nada a ver com o recurso de reprodução automática.

zzzzBov

Answer 30

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.

Answer 31

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>

Expandir trecho

`

Answer 32

Esta foi a única coisa que funcionou para mim ao tentar fazer um vídeo de fundo em loop, reprodução automática e sem controles. Obrigado Arvinda!

Stuart Pinfold

Answer 33

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.

Answer 34

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.

Answer 35

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>

Answer 36

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

Answer 37

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>

Expandir trecho

Answer 38

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

Answer 39

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

Answer 40

Para meu caso de uso, havia duas coisas :

Eu não estava usando a nova política de atributo / webkit playsinline ;
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 /

Answer 41

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>

Answer 42

0

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

Vinícius Philot
fonte

Answer 43

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 !

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

Respostas:

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:

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 `playsinline`atributo na tag de vídeo como este: