Posso evitar o player de vídeo em tela cheia nativo com HTML5 no iPhone ou no Android?

130

Criei um aplicativo da web que usa a tag HTML5 e o código JavaScript que processa outro conteúdo sincronizado com o vídeo em execução. Funciona muito bem em navegadores de desktop: Firefox, Chrome e Safari. Em um iPhone ou DroidX, o player de vídeo nativo aparece e assume a tela, obscurecendo o outro conteúdo dinâmico que eu quero exibir simultaneamente com o vídeo.

Existe alguma maneira de contornar isso? Se necessário, vou descobrir como escrever aplicativos nativos para ambas as plataformas, mas isso me pouparia muito esforço se eu pudesse usar o HTML5 / JavaScript.

iphone android html video fullscreen AlpineCarver
fonte
1
Na verdade, as implementações de navegadores de players a / v no iOS e no Android são bugs como o inferno. Experimente vários jogadores na página ou tente adicionar controles elegantes a eles e você verá - é inutilizável. Então, app fullscreen provavelmente externo para reprodução de vídeo - não é tão ruim;)
tuxSlayer
1
Fico feliz toda vez que os dispositivos Apple processam meu conteúdo da maneira pretendida. Eu costumo comemorar isso.
Anders Lindén
Tecnicamente não, mas há algumas bibliotecas disponíveis, que tornam possível, como iphone-inline-vídeo (divulgação: Eu escrevi)
fregante

Respostas:

74

No iOS 10 ou superior

A Apple ativou o atributo playsinlineem todos os navegadores no iOS 10, portanto, isso funciona perfeitamente:

<video src="file.mp4" playsinline>

No iOS 8 e iOS 9

Resposta curta: use iphone-inline-video , ele permite a reprodução em linha e sincroniza o áudio.

Resposta longa: você pode contornar esse problema simulando a reprodução deslizando o vídeo em vez de realmente reproduzi .play()-lo.

fregante
fonte
Ele não funciona no Captive Network Assistant (Captive Portal)
Dominik Vogt
54

Há uma propriedade que ativa / desativa a reprodução de mídia em linha no navegador da web do iOS (se você estivesse escrevendo um aplicativo nativo, seria allowsInlineMediaPlaybackpropriedade de um UIWebView). Por padrão, no iPhone, isso está definido como NO, mas no iPad, está definido como YES.

Felizmente para você, você também pode ajustar esse comportamento em HTML da seguinte maneira:

<video id="myVideo" width="280" height="140" webkit-playsinline>

... espero que isso resolva isso para você. Não sei se funcionará nos seus dispositivos Android. É uma propriedade de kit da web, por isso pode. Vale a pena, de qualquer maneira.

lxt
fonte
25
Obrigado pela sugestão. Infelizmente, isso não mudou o comportamento que estou vendo - players de vídeo nativos em tela cheia aparecem no iPhone e no DroidX.
precisa saber é o seguinte
5
Também estou tendo esse problema. Eu adicionei o webkit-playsinline e até mesmo a versão xml validado de webkit-playsinline = "webkit-playsinline", mas não altera o comportamento
mike Clagg
7
Isso pode não funcionar no Safari para iPhone, pois a exibição na Web não permite a reprodução de vídeo embutido. Se, no entanto, a página da web estiver hospedada em seu próprio UIWebView em seu próprio aplicativo, você poderá definir essas propriedades e a reprodução de vídeo embutido será possível: webview.allowsInlineMediaPlayback = YES; webview.mediaPlaybackRequiresUserAction = NO;
Willster
14
Isso funciona também no Cordova / PhoneGap. Basta adicionar o seguinte ao seu config.xml no projeto Cordova:<preference name="AllowInlineMediaPlayback" value="true" />
Mr. TA
3
<preferência name = "AllowInlineMediaPlayback" value = "true" /> Ótimo !. funciona bem no meu iPhone. Muito obrigado.
sirius2013
41

Resposta antiga (aplicável até 2016)

Aqui está um link para desenvolvedor da Apple que explicitamente diz que:

no iPhone e iPod touch, que são dispositivos de tela pequena, "O vídeo NÃO é apresentado na página da Web"

Considerações específicas do dispositivo Safari

Suas opções :

  • O webkit-playsinlineatributo funciona para vídeos HTML5 no iOS, mas somente quando você salva a página da web na tela inicial como um aplicativo da web - não se abrir uma página no Safari
  • Para um aplicativo nativo com um WebView (ou um aplicativo híbrido com HTML, CSS, JS), UIWebViewé possível reproduzir o vídeo embutido, mas somente se você definir a allowsInlineMediaPlaybackpropriedade para a UIWebViewclasse como true
KingJulian
fonte
1
Veja meus comentários para a resposta aceita. ICYMI, para Cordova, adicione o seguinte ao seu config.xml:<preference name="AllowInlineMediaPlayback" value="true" />
Sr. TA
No YouTube.com, ele é reproduzido sem ficar em tela cheia
Anthony
A resposta é antiga, 2014, e as coisas podem ter mudado. Além disso, o youtube.com não é um aplicativo nativo com um WebView, conforme mencionado na resposta. Obrigado por perceber.
KingJulian
18

No iOS 10 beta 4.O código correto em HTML5 é

<video src="file.mp4" webkit-playsinline="true" playsinline="true">

webkit-playsinline é para iOS <10 e playsinline é para iOS> = 10

Veja detalhes em https://webkit.org/blog/6784/new-video-policies-for-ios/

iamhite
fonte
11

De acordo com esta página https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html , só estará disponível se (Ativado apenas em um UIWebView com a propriedade allowInlineMediaPlayback definida como YES. ) Entendo no Mobile Safari, isso é SIM no iPad e NÃO no iPhone e iPod Touch.

jz-
fonte
4
Parece que isso só funcionaria se você estivesse configurando uma página do player HTML5 para "viver dentro" de um aplicativo iOS nativo. Certamente não funciona em uma simples página da web.
natlee75
9

Não sei sobre o Android, mas o Safari no iPhone ou iPod touch reproduzirá todos os vídeos em tela cheia por causa do tamanho pequeno da tela. No iPad, ele reproduz o vídeo na página, mas permite que o usuário o faça em tela cheia.

ughoavgfhw
fonte