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.