javascript - 如何使用 UIWebView 让 html5 播放器在 Ipad 全屏上播放

Question

我有一个视频应用程序，我在其中向 HTML5 播放器添加了自定义 CSS。在最小化和最大化模式下，它在 Windows 浏览器中都能正常工作。但是在 Ipad 全屏的情况下，HTML5 不会显示，而是本地播放器开始播放。

我们如何让 HTML5 播放器在 Ipad 全屏模式下播放而不是本地播放器。我开始知道，如果它仅在 allowsInlineMediaPlayback 属性设置为 YES 的 UIWebView 中启用。我们可以让 HTML5 播放器出现。但是什么是 UIWebView 以及如何使用它？

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

Answer 1

UIWebView 是指使用 native 代码或使用网络语言和技术(如 Phonegap)开发应用程序 (App Store) .它是一个允许在应用程序中呈现网页的组件。

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

allowsInlineMediaPlayback 在 UIWebView 中用作 HTML5 视频标签属性，以允许视频内联播放(也称为窗口模式)，这样当在 iPhone/iPod 上观看视频时， native 全屏播放器不会自动切换。

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

这有点棘手，但您可以在此处阅读 - 伪全屏部分 - 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，您可以使用这种伪全屏 Angular 绕过 native 全屏方法。您可能还想阅读 here关于如何检测浏览器中的 native 全屏功能。