Question

我正在尝试在离子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();
}

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

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

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

由于自动播放不支持未静音的视频，我尝试通过HTML添加静音属性。当通过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应用在Inline中播放。在进入HTML5时，Apple Developer Site

中提到了一个有趣的事实

在iPhone和iPod touch上，这是小屏幕设备，＆＃34;视频是未在网页中显示＆＃34;

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

Ionic 3 - 在iOS 10上以原生播放器全屏显示内联视频

2 个答案: