130

我建立了一个Web应用程序，该应用程序使用HTML5标签和JavaScript代码来呈现与正在运行的视频同步的其他内容。它在桌面浏览器（Firefox，Chrome和Safari）中非常有效。在iPhone或DroidX上，本机视频播放器弹出并接管屏幕，从而遮盖了我想与视频同时显示的其他动态内容。

有没有办法解决？如有必要，我将弄清楚如何为这两个平台编写本机应用程序，但是如果我坚持使用HTML5 / JavaScript，则可以节省大量时间。

— 高山雕刻师
source

1

实际上，ios和android中的A / V播放器的浏览器实现都是令人毛骨悚然的。在页面上尝试几个播放器，或尝试向他们添加时尚的控件，您将看到-它不可用。因此，可能是用于播放视频的外部全屏应用程序-还不错；）

— tuxSlayer 2012年

1

每当Apple设备以预定的方式呈现我的内容时，我都会感到高兴。我经常庆祝。

— 安德斯·林登

从技术上讲，没有，但是有一些可用的库可以实现，例如iphone-inline-video（披露：我写过）

— fregante

74

在iOS 10+中

Apple playsinline在iOS 10的所有浏览器中启用了该属性，因此可以无缝运行：

<video src="file.mp4" playsinline>

在iOS 8和iOS 9中

简短答案：使用iphone-inline-video，它可以内联播放并同步音频。

长答案：您可以通过略读视频而不是实际播放视频来模拟回放，从而解决此问题.play()。

— 弗雷坎特
source

在Captive Network Assistant（Captive Portal）中不起作用

— Dominik Vogt

54

有一个属性可以在iOS Web浏览器中启用/禁用在线媒体播放（如果您正在编写本机应用程序，则为allowsInlineMediaPlaybackUIWebView 的属性）。在iPhone上NO，默认设置为YES。在iPad 上，默认设置为。

幸运的是，您还可以按照以下方式在HTML中调整此行为：

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

...希望可以为您解决。我不知道它是否可以在您的Android设备上运行。这是一个webkit属性，所以可能会。值得一去。

— x
source

25

谢谢你的建议。不幸的是，它并没有改变我所看到的行为-全屏本机视频播放器同时在iPhone和DroidX上弹出。

— AlpineCarver

5

我也有这个问题。我添加了webkit-playsinline甚至xml验证版本的webkit-playsinline =“ webkit-playsinline”，但没有更改行为

— Mike clagg

7

这可能无法在iPhone的Safari中使用，因为网络视图不允许嵌入式视频播放。但是，如果网页托管在您自己的应用程序中自己的UIWebView中，则可以设置以下属性，并且可以进行内联视频播放：webview.allowsInlineMediaPlayback = YES; webview.mediaPlaybackRequiresUserAction = NO;

— Willster，2012年

14

这也适用于Cordova / PhoneGap。只需在Cordova项目中将以下内容添加到您的config.xml中：<preference name="AllowInlineMediaPlayback" value="true" />

— TA先生

3

<preference name =“ AllowInlineMediaPlayback” value =“ true” />太好了！它在我的iPhone上正常工作。非常感谢。

— sirius2013 '16

41

旧答案（适用于2016年）

这是一个Apple开发人员链接，其中明确指出-

在iPhone和iPod touch，这是小屏幕设备，“视频是不是在网页内呈现”

Safari设备特定的注意事项

您的选择：

该webkit-playsinline属性适用于iOS上的HTML5视频，但仅当您将网页另存为webapp时才适用 -如果在Safari中打开页面，则该属性不起作用
对于具有WebView的本机应用程序（或具有HTML，CSS，JS的混合应用程序），UIWebView允许内联播放视频，但前提是您将该类的allowsInlineMediaPlayback属性设置UIWebView为true

— 朱利安国王
source

1

请参阅我对已接受答案的评论。ICYMI，对于Cordova，将以下内容添加到您的config.xml中：<preference name="AllowInlineMediaPlayback" value="true" />

— TA先生

在YouTube.com上，播放时会全屏播放

— 安东尼，

答案是旧的，2014年，情况可能已经改变。另外，youtube.com并非答案中提到的带有WebView的本地应用。感谢您的注意。

— KingJulian

18

在iOS 10 beta 4中，HTML5中正确的代码是

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

webkit-playsinline适用于iOS <10，playsinline适用于iOS> = 10

通过https://webkit.org/blog/6784/new-video-policies-for-ios/查看详细信息

— 亚铁矿
source

11

根据此页面 https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html ，仅当（仅在UIWebView中启用，且allowInlineMediaPlayback属性设置为YES时，此选项才可用。）我知道在Mobile Safari中，在iPad上为YES，在iPhone和iPod Touch上为NO。

— z
source

4

似乎只有在您设置HTML5播放器页面以“驻留”在本机iOS应用程序中时，此方法才起作用。在普通的网页上，它当然不起作用。

— natlee75

9

我不了解android，但是由于屏幕尺寸较小，iPhone或iPod touch上的Safari可以全屏播放所有视频。在iPad上，它将在页面上播放视频，但允许用户将其全屏显示。

— ughoavgfhw
source

我可以在iPhone或Android上避免使用HTML5原生的全屏视频播放器吗？

在iOS 10+中

在iOS 8和iOS 9中