Ionic 3 - 内联视频在 iOS 10 的本机播放器中全屏打开

Question

我正在尝试在 ionic 3 移动应用程序内播放视频 - 我想避免启动本机视频播放器。

我正在 iPhone 5s - iOS 10 上进行测试。

这是我创建的一个函数，用于根据我阅读的所有内容加载视频：

loadVideo(src: string, onComplete?: (src: string) => void): void {
    var video: HTMLVideoElement = document.createElement('video');

    video.setAttribute('playsinline', '');
    video.setAttribute('webkit-playsinline', '');
    video.setAttribute('src', src);

    var onVideoLoaded = () => {
        video.removeEventListener('loadeddata', onVideoLoaded);

        if (onComplete != null) onComplete(src);
    };

    video.addEventListener('loadeddata', onVideoLoaded);

    video.load();
}

加载完成后，我通过 video.play() 播放。

这个函数的另一个版本是：

loadVideo(src: string, onComplete?: (src: string) => void): void {
    var video: HTMLVideoElement = document.createElement('video');

    video.setAttribute('playsinline', '');
    video.setAttribute('webkit-playsinline', '');

    var srcElement: HTMLSourceElement = document.createElement('source');

    srcElement.setAttribute('src', src);
    srcElement.setAttribute('type', 'video/mp4');

    var onVideoLoaded = () => {
        video.removeEventListener('loadeddata', onVideoLoaded);

        if (onComplete != null) onComplete(src);
    };

    video.addEventListener('loadeddata', onVideoLoaded);

    video.appendChild(srcElement);
    video.load();
}

它使用源元素而不是视频元素中的源属性。

我还尝试直接在 HTML 中编写视频标签，以防 Angular 有一些代码可以解决这个问题：

<video playsinline webkit-playsinline autoplay muted">
    <source src="test.mp4" type="video/mp4">
</video>

由于不应该为未静音的视频支持自动播放，因此我尝试通过 HTML 添加 muted 属性。 通过 JavaScript 添加它时，将其添加为属性时似乎没有效果，而是我正在编写 video.muted = true。

我尝试的另一件事是通过用户交互而不是自动播放来播放静音视频：

window.addEventListener('pointerdown', () => video.play());

我还尝试使用这个 polyfill，它应该在 iOS 8 和 9 上模仿 iOS 10 的 playinline：

enableInlineVideo(video, false);

https://github.com/bfred-it/iphone-inline-video

我尝试的一切最终都得到了相同的结果 - 在 iOS 上，视频在本机播放器中全屏播放，即使它应该内联播放，而在 Android 上它按预期内联播放。

Answer 1

您是否尝试过在您的config.xml 中使用以下内容

<preference name="AllowInlineMediaPlayback" value="true" />

这会触发 Native 应用程序以内联方式播放。在来到 HTML5 时，Apple Developer Site 中有一个有趣的事实@

在 iPhone 和 iPod touch（它们是小屏幕设备）上，“视频是 不在网页中显示”

Answer 2

它实际上需要两件事，而且它确实可以在 iPhone 上工作：

将此添加到 config.xml

<preference name="AllowInlineMediaPlayback" value="true" />

并且在 HTML 中你必须包含 webkit-playsinline

<video webkit-playsinline playsinline autoplay muted loop><source src='vid/vid.mp4' type='video/mp4'></video>

复制

Phonegap iOS HTML5 Video Opens Player

感谢@a432511