iOS 10 - video opens in fullscreen in native player

[royibernthal]

I'm integrating PIXI within a mobile app (ionic - cordova).

I'm trying to play a video in the canvas - 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 creating a texture from the video

PIXI.Texture.fromVideo(video);

and then playing it

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.

 

These links do not solve the issue for me:
http://www.html5gamedevs.com/topic/24698-ios-8-9-inline-video/
https://github.com/pixijs/pixi.js/issues/3112
https://github.com/bfred-it/iphone-inline-video

[royibernthal]

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