Ionic CLI - 3.9.2
Cordova cli - 7.0.1
Ionic framework 3.6.0
OS - macOS Sierra
So … In a blank ionic app, how do you automatically play a locally stored video inside a div but not in full screen?
-Example video file- https://d2v9y0dukr6mq2.cloudfront.net/video/preview/terrain_w1anmt8er__PM.mp4 (Grab any mp4 file from video blocks)
This video plays well on PC/MAC/Android/Chrome/Safari/IE but not iOS/iPad
The video is encoded with MPEG-4 which should be the same as H264.
In Linux terminal you can get the codec info with:
mediainfo -Inform="Video;Codec%" filename.mp4
I am quite familiar with handbrake and ffmpeg so any settings tips there would be welcome. Windows/Mac/Linux suggestions all welcome.
<video loop controls="true" width="100%" height="100%" poster="../../assets/video/default.jpg" muted preload autoplay > <source src="../../assets/video/video_blocks.mp4" type="video/mp4"> <source src="../../assets/video/ogg.ogg" type="video/ogg"> <source src="../../assets/video/webm.webm" type="video/webm"> Sorry but your device doesn’t support html5 video </video>
According to the apple docs as long as you have the video muted this should be possible but I cannot even get the video to play on an iPad so falling at the first hurdle.(Well, it’s more like the 15th hurdle or hoop to be fair )
I have not tried the ionic video player plugin as it looks like it plays videos fullscreen, or am I wrong about that?
*** EDIT ***
Apple policies on video: