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.

— 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

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

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

No iOS 10 ou superior

No iOS 8 e iOS 9