Você pode reproduzir automaticamente vídeos HTML5 no iPad?

123

O atributo <video>tags autoplay="autoplay"funciona bem no Safari.

Ao testar em um iPad, o vídeo deve ser ativado manualmente.

Eu pensei que era um problema de carregamento, então executei um loop para verificar o status da mídia:

videoPlay: function(){
    var me = this;
    console.log('STATE: ' + $("#periscopevideo").get(0).readyState);
    if ($("#periscopevideo").get(0).readyState != 4){
      setTimeout(function(){me.videoPlay();}, 300);
    }
    else {
      $("#periscopevideo").get(0).play();
    }
}

O estado permanece no 0iPad. No meu safari desktop, ele passa por 0, 1e, finalmente 4. No iPad, ele só alcança 4se eu tocar manualmente na seta "reproduzir".

Além disso, chamar $("#periscopevideo").get(0).play()de um clique via onClicktambém funciona.

Existe alguma restrição da Apple em relação à reprodução automática? (Estou executando o iOS 5 ou superior a propósito).

— Jem
fonte

Related / duplicatas: stackoverflow.com/questions/2841966/… , stackoverflow.com/questions/4259928/…

— apsillers

Talvez devêssemos olhar para a detecção do navegador e se você deve ou não chamar playVideo (): stackoverflow.com/questions/26895492/…

— Redtopia

Esse trabalho para mim github.com/Stanko/html-canvas-video-player

— Dimitar

Postagem útil no blog sobre este tópico: webkit.org/blog/6784/new-video-policies-for-ios #

— Matthias M

o opera mini no ios suporta a reprodução automática por padrão, enquanto o chrome, o firefox e o safari não oferecem e não oferecem opções para ativar.

— anonymous

156

atualização para iOS 10

A proibição da reprodução automática foi suspensa a partir do iOS 10 - mas com algumas restrições (por exemplo, A pode ser reproduzida automaticamente se não houver faixa de áudio).

Para ver uma lista completa dessas restrições, consulte os documentos oficiais: https://webkit.org/blog/6784/new-video-policies-for-ios/

iOS 9 e anterior

A partir do iOS 6.1, não é mais possível reproduzir automaticamente vídeos no iPad.

Minha suposição sobre por que eles desativaram o recurso de reprodução automática?

Bem, como muitos proprietários de dispositivos têm limites de uso / largura de banda de dados em seus dispositivos, acho que a Apple achou que o próprio usuário deveria decidir quando iniciaria o uso da largura de banda.

Após algumas pesquisas, encontrei o seguinte extrato na documentação da Apple em relação à reprodução automática em dispositivos iOS para confirmar minha suposição:

"A Apple tomou a decisão de desativar a reprodução automática de vídeo em dispositivos iOS, através da implementação de scripts e atributos.

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, a pré-carga e a reprodução automática estão desabilitadas. Nenhum dado é carregado até que o usuário o inicie. "- documentação da Apple.

Aqui está um aviso separado, apresentado na página de Referência HTML5 do Safari, sobre por que a mídia incorporada não pode ser reproduzida no Safari no iOS:

Aviso : para impedir downloads não solicitados em redes celulares às custas do usuário, a mídia incorporada não pode ser reproduzida automaticamente no Safari no iOS - o usuário sempre inicia a reprodução. Um controlador é fornecido automaticamente no iPhone ou iPod touch depois que a reprodução é iniciada, mas para o iPad você deve definir o atributo de controles ou fornecer um controlador usando JavaScript.

O que isso significa (em termos de código) é que o Javascript play()e os load()métodos ficam inativos até o usuário iniciar a reprodução, a menos que o método play()ou load()seja acionado pela ação do usuário (por exemplo, um evento de clique).

Basicamente, um botão de reprodução iniciado pelo usuário funciona, mas um onLoad="play()"evento não.

Por exemplo, isso reproduziria o filme:

<input type="button" value="Play" onclick="document.myMovie.play()">

Enquanto o seguinte não faria nada no iOS:

<body onload="document.myMovie.play()">

— dsgriffin
fonte

1

Hmmm 3 meses criando um despertador on-line para o iPhone Safari pelo ralo! Nós (sleep.fm) descobrimos uma maneira de manter o telefone acordado enquanto o aplicativo está aberto, mas agora com o iOS 6.1 o áudio do alarme não toca. Funcionou bem no iOS 6.0. Existe uma solução alternativa?

— precisa saber é o seguinte

1

oh espere, temos o despertador da Web para dispositivos móveis (sleep.fm) para o iPhone Safari em funcionamento novamente, para que haja soluções alternativas para a falta de suporte à reprodução automática de html5.

— chaser7016

1

@ Jonah1289 De acordo com o seu blog no Sleep.fm Brian Cavalier tweetou um link do github com o seguinte título Reprodução automática de áudio no ipad ou iphone usando webkitaudiocontext em vez da marca de áudio Pode ser um bom lugar para começar.

— Francisco

1

Mais detalhes, por favor - que soluções alternativas específicas existem para a falta de suporte à reprodução automática?

— Umopepisdn

11

O que eles devem fazer é permitir a reprodução automática quando estiver no wifi e ter reprodução manual ou solicitar ao usuário que o vídeo deseja reproduzir automaticamente quando estiver em uma rede móvel.

— Ric

16

Quero começar dizendo que sei que essa pergunta é antiga e que já tem uma resposta aceita; mas, como um infeliz usuário da Internet que usou essa pergunta como um meio de acabar apenas provando estar errado logo depois (mas não antes de incomodar um pouco meu cliente), quero acrescentar meus pensamentos e sugestões.

Enquanto @DSG e @Giona estão corretos, e não há nada errado com suas respostas, há um mecanismo criativo que você pode empregar para "se locomover", por assim dizer, essa limitação. Isso não quer dizer que eu esteja tolerando a contornar esse recurso, muito pelo contrário, mas apenas alguns mecanismos para que um usuário ainda "sinta" como se um arquivo de vídeo ou áudio estivesse "tocando automaticamente".

A solução rápida é ocultar uma tag de vídeo em algum lugar da página para celular, já que criei um site responsivo e faço isso apenas para telas menores. A tag de vídeo (exemplos HTML e jQuery):

HTML

<video id="dummyVideo" src="" preload="none" width="1" height="2"></video>

jQuery

var $dummyVideo = $("<video />", {
  id: "dummyVideo",
  src: "",
  preload: "none",
  width: "1",
  height: "2"
});

Com isso oculto na página, quando um usuário "clica" para assistir a um filme (ainda não há interação com o usuário, não há como contornar esse requisito), em vez de navegar para uma página de exibição secundária, carrego o vídeo oculto. Isso funciona principalmente porque a tag de mídia não é realmente usada, mas promovida para uma instância do Quicktime, portanto, não é necessário ter um elemento de vídeo visível. No manipulador de "clique" (ou "touchend" no celular).

$(".movie-container").on("click", function() {
  var url = $(this).data("stream-url");
  $dummyVideo.attr("src", url);
  $dummyVideo.get(0).load(); // required if src changed after page load
  $dummyVideo.get(0).play();
});

E viola. No que diz respeito ao UX, um usuário clica em um vídeo para reproduzir e o Quicktime abre a reprodução do vídeo escolhido. Isso permanece dentro da limitação de que os vídeos só podem ser reproduzidos por meio da ação do usuário, por isso não estou forçando dados de quem não está decidindo assistir a um vídeo com este serviço. Eu descobri isso ao tentar descobrir como exatamente o YouTube conseguiu isso com seus dispositivos móveis, que é essencialmente uma construção de página Javascript muito boa e um elemento sofisticado escondido como no caso da tag de vídeo.

Aqui está uma "solução alternativa" para tentar criar um recurso UX de "reprodução automática" em dispositivos iOS sem ultrapassar as limitações da Apple e ainda fazer com que os usuários decidam se desejam assistir a um vídeo (ou áudio mais parecido, embora eu não testaram) sem ter apenas um carregado sem a permissão deles.

Além disso, para a pessoa que comentou que é do sleep.fm, infelizmente isso ainda não teria sido uma solução para seus problemas, que é a reprodução de áudio com base no tempo.

Espero que alguém ache essas informações úteis, pois isso me salvaria uma semana de entrega de más notícias a um cliente inflexível quanto a esse recurso e fiquei feliz em encontrar uma maneira de entregá-lo no final.

EDITAR

Achados adicionais indicam que a solução alternativa acima é apenas para dispositivos iPhone / iPod. O iPad reproduz vídeo no Safari antes de ser exibido em tela cheia; portanto, você precisará de algum mecanismo para redimensionar o vídeo ao clicar antes de reproduzir, ou então você terminará com áudio e sem vídeo.

— Brandon Buck
fonte

2

Seria melhor usar em $dummyVideo.get(0)vez de colchetes, para que o jQuery possa falhar normalmente se sua seleção estiver vazia.

— Micros

12

Basta definir

webView.mediaPlaybackRequiresUserAction = NO;

A reprodução automática funciona para mim no iOS.

— Er Li
fonte

29

Isso não funciona para um site, apenas para sites em que você os envolveu com um aplicativo nativo.

— Brandon Buck

5

Quero dizer, de uma página da web (como a pergunta está sendo feita) isso é algo completamente inacessível - sim, o Javascript em um navegador não pode fazer isso. Isso só funciona se você estiver executando seu site dentro de um WebView a partir de um aplicativo que você controla, para que ele realmente não forneça uma solução para a pergunta.

— Brandon Buck

6

@izuriel para ser justo, ele fez tag a pergunta com "Objective-C" e "cocoa-touch", por isso não é tão rebuscado para assumir que ele está usando um webview

— Kloar

3

As tags @Kloar geralmente são adicionadas como um meio de obter mais atenção ou um mal-entendido geral sobre o problema que eles estão tentando resolver. A pessoa que fez a pergunta pode ter pensado que mencionar o objetivo-c era o mesmo que dizer "iOS" (e semelhante para o cacau-touch). A tag "uiwebview" não está listada, portanto, eu a excluiria como uma opção viável. A pergunta menciona o uso do Safari no desktop e no iPad (nada sobre um aplicativo) e usa códigos de demonstração Javascript para depurar a situação. Apesar de tudo, eu diria que é mais uma aposta segura que essa questão realmente esteja procurando soluções nativas da Web.

— Brandon Buck

No Android: developer.android.com/reference/android/webkit/…

— cottonBallPaws

11

A partir do iOS 10, os vídeos agora podem ser reproduzidos automaticamente, mas apenas eles são silenciados ou não têm faixa de áudio. Yay!

Em resumo:

<video autoplay> elementos agora respeitarão o atributo de reprodução automática, para elementos que atendam às seguintes condições:
- <video> os elementos poderão reproduzir automaticamente sem um gesto do usuário se a mídia de origem não contiver faixas de áudio.
- <video muted> também será permitido que os elementos sejam reproduzidos automaticamente sem um gesto do usuário.
- Se um <video>elemento obtiver uma faixa de áudio ou ficar sem som sem um gesto do usuário, a reprodução será interrompida.
- <video autoplay> os elementos só começarão a ser reproduzidos quando visíveis na tela, como quando são rolados para a janela de visualização, tornados visíveis por meio de CSS e inseridos no DOM.
- <video autoplay> os elementos serão pausados se ficarem invisíveis, como rolando para fora da janela de exibição.

Mais informações aqui: https://webkit.org/blog/6784/new-video-policies-for-ios/

— JackKalish
fonte

4

O atributo de reprodução automática funciona apenas no PC, não no celular. Eu tentei muitas vezes.

— precisa saber é o seguinte

7

Nesta referência do Safari HTML5 , você pode ler

Para impedir downloads não solicitados em redes celulares às custas do usuário, a mídia incorporada não pode ser reproduzida automaticamente no Safari no iOS - o usuário sempre inicia a reprodução. Um controlador é fornecido automaticamente no iPhone ou iPod touch depois que a reprodução é iniciada, mas no iPad você deve definir o atributo de controles ou fornecer um controlador usando JavaScript.

— Giona
fonte

38

"além de arquivos GIF que podem ter vários MB e usar largura de banda sem que as pessoas

— percebam

@Simon_Weaver x12 vezes na maioria das vezes para ser preciso.

— Burak Tokak

2

Deixe o vídeo silenciado primeiro para garantir a reprodução automática no ios e, em seguida, ative o som, se desejar.

<video autoplay loop muted playsinline>
  <source src="video.mp4?123" type="video/mp4">
</video>

<script type="text/javascript">
$(function () {
  if (!navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
    $("video").prop('muted', false);
  }
});
</script>

— Mohammad Ali Akbari
fonte