我可以在 iPhone 或 Android 上避免使用 HTML5 原生全屏视频播放器吗？
我构建了一个 Web 应用程序，它使用 HTML5 标签和 JavaScript 代码来呈现与正在运行的视频同步的其他内容。它在桌面浏览器中运行良好：Firefox、Chrome 和 Safari。在 iPhone 或 DroidX 上，本机视频播放器会弹出并接管屏幕，从而遮挡我想要与视频同时显示的其他动态内容。
有什么办法解决这个问题吗？如果有必要，我会弄清楚如何为这两个平台编写本机应用程序，但如果我能坚持使用 HTML5/JavaScript，这会节省我大量的精力。
I've built a web app that uses the HTML5 tag and JavaScript code that renders other content synchronized with the running video. It works great in desktop browsers: Firefox, Chrome, and Safari. On an iPhone or a DroidX, the native video player pops up and takes over the screen, thus obscuring the other dynamic content that I want to display simultaneously with the video.
Is there any way around this? If necessary, I'll figure out how to write native apps for both those platforms, but it would save me a ton of effort if I could just stick with HTML5/JavaScript.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（7）
在 iOS 10+ 中，
Apple 在 iOS 10 上的所有浏览器中启用了属性
playsinline，因此可以无缝运行：在 iOS 8 和 iOS 9 中
简短回答： 使用 iphone-inline-video，它启用内联播放并同步音频。
长答案：您可以通过略读视频来模拟播放而不是实际
.play()来解决此问题。In iOS 10+
Apple enabled the attribute
playsinlinein all browsers on iOS 10, so this works seamlessly:In iOS 8 and iOS 9
Short answer: use iphone-inline-video, it enables inline playback and syncs the audio.
Long answer: You can work around this issue by simulating the playback by skimming the video instead of actually
.play()'ing it.有一个属性可以在 iOS Web 浏览器中启用/禁用行媒体播放（如果您正在编写本机应用程序，则它将是 UIWebView 的
allowsInlineMediaPlayback属性）。默认情况下，在 iPhone 上此设置为NO，但在 iPad 上则设置为YES。幸运的是，您还可以在 HTML 中调整此行为，如下所示：
...希望如此给你整理一下。我不知道它是否适用于您的 Android 设备。它是一个 webkit 属性，所以可能是这样。无论如何，值得一去。
There's a property that enables/disables in line media playback in the iOS web browser (if you were writing a native app, it would be the
allowsInlineMediaPlaybackproperty of a UIWebView). By default on iPhone this is set toNO, but on iPad it's set toYES.Fortunately for you, you can also adjust this behaviour in HTML as follows:
<video id="myVideo" width="280" height="140" webkit-playsinline>...that should hopefully sort it out for you. I don't know if it will work on your Android devices. It's a webkit property, so it might. Worth a go, anyway.
旧答案（适用至 2016 年）
这是一个 Apple 开发者链接，明确指出 -
在小屏幕设备 iPhone 和 iPod touch 上，“视频是 <强>未出现在网页中”
Safari 设备特定注意事项
您的选项：
webkit-playsinline属性有效适用于 iOS 上的 HTML5 视频，但仅当您将网页作为 Web 应用程序保存到主屏幕时 - 如果在 Safari 中打开页面则不会UIWebView允许内联播放视频，但前提是您 为UIWebView设置allowsInlineMediaPlayback属性类为真Old answer (applicable till 2016)
Here's an Apple developer link that explicitly says that -
on iPhone and iPod touch, which are small screen devices, "Video is NOT presented within the Web Page"
Safari Device-Specific Considerations
Your options:
webkit-playsinlineattribute works for HTML5 videos on iOS but only when you save the webpage to your home screen as a webapp - Not if opened a page in SafariUIWebViewallows to play the video inline, but only if you set theallowsInlineMediaPlaybackproperty for theUIWebViewclass to true在 iOS 10 beta 4 中。HTML5 中的正确代码是
webkit-playsinline适用于 iOS10，并且playsinline适用于 iOS >= 10请通过 https://webkit.org/blog/6784/new-video-policies-for-ios/
In iOS 10 beta 4.The right code in HTML5 is
webkit-playsinlineis for iOS < 10, andplaysinlineis for iOS >= 10See details via https://webkit.org/blog/6784/new-video-policies-for-ios/
根据这个页面
https://developer.apple.com/库/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html
它仅在以下情况下可用（仅在将 allowedInlineMediaPlayback 属性设置为 YES 的 UIWebView 中启用。）据我所知，在 Mobile Safari 中，iPad 上为 YES，iPhone 和 iPod Touch 上为 NO。
According to this page
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html
it is only available if (Enabled only in a UIWebView with the allowsInlineMediaPlayback property set to YES.) I understand in Mobile Safari this is YES on iPad and NO on iPhone and iPod Touch.
我不知道 Android 的情况如何，但由于屏幕尺寸较小，iPhone 或 iPod touch 上的 Safari 会全屏播放所有视频。在 iPad 上，它将播放页面上的视频，但允许用户将其全屏显示。
I don't know about android, but Safari on the iPhone or iPod touch will play all videos full screen because of the small screen size. On the iPad it will play the video on the page but allow the user to make it full screen.
对于 React.js，不要忘记使用驼峰命名法：
For React.js ,don't forget to use camelcase :