如何使用 UIWebView 让 html5 播放器在 Ipad 全屏上播放答案

【问题标题】：how to make html5 player play on Ipad fullscreen using UIWebView如何使用 UIWebView 让 html5 播放器在 Ipad 全屏上播放
【发布时间】：2014-04-22 12:10:43
【问题描述】：

我有一个视频应用程序，我在其中向 HTML5 播放器添加了自定义 css。它在最小化和最大化模式下都可以在 Windows 浏览器中正常工作。但如果 Ipad 全屏 HTML5 不显示，则本机播放器开始发挥作用。

我们怎样才能让 HTML5 播放器在 Ipad 全屏模式下播放而不是原生播放器。我开始知道，如果它仅在 UIWebView 中启用，allowInlineMediaPlayback 属性设置为 YES。我们可以让 HTML5 播放器出现。但是 UIWebView 是什么，如何使用呢？

非常感谢任何形式的帮助。请帮助。

【问题讨论】：

标签： javascript jquery ios ipad html5-video

【解决方案1】：

UIWebView 是指使用本机代码或使用具有Phonegap 等技术的网络语言开发应用程序（App Store）。它是一个允许在应用程序中呈现网页的组件。

当您在 Safari iOS 中观看 HTML5 视频时，Apple 不允许在 iPad/iPhone 上控制其原生全屏体验 - 全屏时视频将在默认的 quicktime 播放器中播放。声明为here。

allowsInlineMediaPlayback 在 UIWebView 中用作 HTML5 视频标记属性，以允许视频内联播放（也称为窗口模式），因此在 iPhone/iPod 上观看视频时不会自动切换本机全屏播放器。

要实现您想要的，您可以为此构建一个应用程序，或者如果您想坚持基于浏览器的 HTML5 视频显示，您可以在 iPad 上模拟全屏（仅限 iPad - 它不适用于 iPhone/iPod）。为此，您需要开发 own custom controls 并将视频标签的 CSS 中的尺寸扩展到视口的全宽和全高。

这有点棘手，但您可以在此处阅读 - 伪全屏部分 - 获取 start。例如，IE9 和 10 不支持 HTML5 视频中的原生全屏，您也需要实现此方法。

我个人使用的东西略有不同，例如：

.fullscreen{
    position:fixed;
    z-index:1000;
    left:0; right:0; top:0; bottom:0;
    width:100%; 
    height:100%;
    background:#000000;
    overflow:hidden;
}

对于 iPad，您可以使用这种伪全屏角度绕过原生全屏方法。您可能还想阅读here，了解如何在浏览器中检测本机全屏功能。

【讨论】：