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

    video.autoplay = false;

    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', '');

	video.autoplay = false;

	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.

Both function versions end 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.

1 Like

I updated the info after more testing and isolated the issue further.

1 Like

Why are you doing all this DOM manipulation instead of just putting the <video> element in your template?

I don’t want to add it to the DOM, I’d like to load this video and then render it in the canvas via PIXI.

Regardless, it shouldn’t make a difference, should it?

Isn’t that what document.createElement() does?

What I’m trying to get at is that I have had best results when I let Angular do as much of the DOM interaction as humanly possible.

document.createElement() creates an element, but it doesn’t append it to the DOM, correct me if I’m wrong or if my phrasing is incorrect.

Makes sense, possibly Angular added some magic for inline videos on iOS under the hood, though I don’t think in my case this can be done (or at the very least it won’t be the ideal solution) - I need the videos loading and rendering to be very dynamic and not appended to the DOM.

I guess “DOM” has become overloaded to also mean a particular node tree, and in that sense I agree with you. I meant “DOM” in the larger sense of “all the direct interaction with HTML elements”. I can respect if you don’t want the element in the template, but I just figured it might make both lifecycle management and property binding easier if you could leverage typical Angular syntax.

I guess “DOM” has become overloaded to also mean a particular node tree, and in that sense I agree with you. I meant “DOM” in the larger sense of “all the direct interaction with HTML elements”.

Yup :slight_smile:

Yes I understand your point, unfortunately this is a unique case.

Do you have any thoughts regarding the actual issue?

Someone in this forum must have dealt with inline videos on iOS?

@rapropos Just to be on the safe side to make sure that I’m not missing any obvious solution - I tried to write it in the HTML template as you suggested to see if maybe Angular takes care of this somehow - I got the same result.

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

How come playing a video inline on iOS is impossible for me? It’s supposed to be supported nowadays.

Old question but I feel like I should have a go at this. Not sure what version of iOS you are now currently testing on but I have succefully used inline video content.

<video #video1 muted="true" playsinline
     [attr.loop]="videoBuffer[0].looped"
     [@shift]="vidState1" preload="auto"
     [src]="videoBuffer[0].url" [poster]="videoBuffer[0].thumbnail?.url"></video>

I think there are some blockers to autoplay (not inline) in that the video has to be muted for it to autoplay inline.

VideoJS Issue referencing this

If you interested, I posted about a full solution I have for this with 3 rotating inline video elements that autoplay.

Fast, Inline HTML5 Video

Do it simple and use https://github.com/videogular/videogular2 :smiley:

For community’s sake, here is the answer: https://stackoverflow.com/questions/45568964/ionic-3-inline-video-opens-in-fullscreen-in-native-player-on-ios-10

Yep
For ios add in config.xml