CODEWITHSUNDEEP
javascriptiosangularcordovaionic-framework
Royi Bernthal
Royi Bernthal

Reputation: 482

Ionic 3 - inline video opens in fullscreen in native player on iOS 10

I'm trying to play a video inline within an ionic 3 mobile app - I'd like to avoid launching the native video player.

I'm testing on iPhone 5s - iOS 10.

Here's a function I created for loading videos according to everything I've read:

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();
}

After the load is complete, I'm playing it via video.play().

Another version of this function is:

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();
}

which uses the source element instead of the source attribute in the video element.

I also tried writing a video tag directly in HTML in case Angular has some code under the hood that takes care of this:

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

Since autoplay isn't supposed to supported for videos that are not muted I tried to add the muted attribute as well via HTML. When adding it via JavaScript it doesn't seem to have an effect when adding it as an attribute, instead I'm writing video.muted = true.

Another thing I tried was to play a muted video it with user interaction instead of autoplaying it:

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

I also tried to use this polyfill which is supposed to imitate iOS 10's playsinline on iOS 8 and 9:

enableInlineVideo(video, false);

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

Everything I tried ends up having the same result - on iOS the video is played in fullscreen in the native player even though it's supposed to play inline, and on Android it plays inline as expected.

Upvotes: 14

Views: 9910

Answers (2)

Himalaya Ahuja
Himalaya Ahuja

Reputation: 11

It actually takes two things and it DOES work on the iPhone:

Add this to config.xml

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

And in the HTML you must include webkit-playsinline

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

Duplicate for

Phonegap iOS HTML5 Video Opens Player

credits to @a432511

Upvotes: 1

Tummala Krishna Kishore
Tummala Krishna Kishore

Reputation: 8271

Did you tried with the following in your config.xml 

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

Which Triggers the Native app to play in Inline. while coming to the HTML5 there is a intresting fact that was stated in Apple Developer Site

on iPhone and iPod touch, which are small screen devices, "Video is NOT presented within the Web Page"

Upvotes: 40

Related Questions