I am trying to play the embedded video in the ionic 3 mobile application - I would like not to run my own video player.
I am testing on iPhone 5s - iOS 10.
Here is the function I created to download the video according to everything I 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 download is complete, I play through video.play ().
Another version of this function:
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 the video tag directly in HTML in case Angular has some code that takes care of this:
<video playsinline webkit-playsinline autoplay muted">
<source src="test.mp4" type="video/mp4">
</video>
, , muted HTML. JavaScript , , , video.muted = true.
, , , , :
window.addEventListener('pointerdown', () => video.play());
, iOS 10 iOS 8 9:
enableInlineVideo(video, false);
https://github.com/bfred-it/iphone-inline-video
, , - iOS , , Android - , .