Html5 video ... playing a local .mp4 video on iOS

Ionic Framework ionic-v3
1

Ionic CLI - 3.9.2
Cordova cli - 7.0.1
Ionic framework 3.6.0
Xcode 8.3.3
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 :smiley: )

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:
https://webkit.org/blog/6784/new-video-policies-for-ios/

2

I have not tested my app on a iPad yet - but this works in my app on a iPhone 5

in html:

<video #video1 preload=“metadata” webkit-playsinline=“webkit-playsinline” >

And in the TS file:

add reference to the video element
@ViewChild(‘video1’) videoPlayer: ElementRef;

then within a function:

           videoPlayer.type="video/mp4";
           videoPlayer.src= "assets/video/emaple.mp4";
           videoPlayer.load();
           videoPlayer.play();

The video is played as soon as the paged is opened.

Hopes that all makes sense and is of help!

3

Hey jar19 … thanks for the advice. This works nicely in android devices and with “ionic serve”. But when I bundle it up in xcode and ship it off to an iPad it does not work. And it also does not work if i safari remote debug the app on my iPad from my Mac(Hard edit the html and run the JS in the console). Are you sure it works natively on the iPhone and not just in emulators?

Must be some weird iPad specific thing. I just read something about quicktime needing to be installed for video to work so I am just looking into that now.

4

I think my problem could be related to accessing local files and permissions on the iPad or possibly the codec of the video as I now have a working version on the iPad when using the following code.

<video controls="controls" preload="metadata" autoplay="autoplay" webkit-playsinline="webkit-playsinline" class="videoPlayer"><source src="https://player.vimeo.com/external/76336826.sd.mp4?s=dd361715fad172bf26ba0ad91635c4f9" type="video/mp4"/></video>

hmmmm … so does anyone know a good way to encode video that will work on the iPad or know more about why accessing local .mp4 videos might not work? I am currently encoding with ffmpeg which works great everywhere else apart from the iPad.

5

The plot thickens. This is definitely not a codec issue because I can now load the video with no problems from a remote server. So the problem is absolutely related to iPad not allowing me to load local files.

6

Try : https://ezgif.com/resize-video

7

Thanks jar19 … that’s useful … but the problem is definitely not codec related because I can get the file to play from my server using the above code. So I am pretty certain this is related to the iPad specifically and some restrictions the iPad is placing on loading up video files from the applications own local directory into the native. Or there is a problem with me using relative paths to access the file “…/pathtofile.video.mp4” perhaps i need to be using “file://pathtofile/video.mp4” …

8

Not sure if it is of any importance but I have only ever placed my video files in the Icon assets folder - perhaps there is a restriction on where it can access.

Or perhaps the ipad has an newer operating system and they have changed the conditions.

Did you try the test video file I sent in the message link?

9

The final issue was indeed a relative path problem … once I stuck your working video files in the root next to the index they worked. Thanks for helping with your video code and your codec suggestions and the working video example you sent over … that helped me get this working so very much appreciated jar19! Now I just need to figure out why my mp4 codecs aren’t working but that shouldn’t be too much of a problem.

If I get the ffmpeg command to do the video conversion I will post the code here.

thanks again!

10

I have tried a few different ffmpeg methods to create .mp4 files that will work on the iPad with no success. I am fairly sure the problem is related to ffmpeg not creating “mp42” codecs and I think it can only build “mp41”. At least on Ubuntu.

However the following 2 methods will create videos that will play correctly on the iPad 3rd gen version 9.3.5

You can use .mov or .avi or .mpg or .mkv files and more as the inputs:

—Option 1 use ffmpeg to create .3gp files —(Very poor quality/option)
ffmpeg -i InputFile.avi OutputFile.3gp

—Option 2 , use Handbrake on Ubuntu/Windows—
Install Handbrake GUI and use that to create .m4v files then rename them to .mp4 … this works like a charm.

11

Hello,

how can i load a local Video in a Ionic App (IOS, IPohne problem).

Problem:
src=“assets/videos/xxx.mp4”

But so is Okay: src=“http://www.XXX.com/XXX.mp4”

Thanks

12

When the limits of Ionic comes, you can also try the native plugins (aka cordova plugins). Officially supported plugins fit directly in any Ionic app (iOs/Android). In your case, the native video player.

Edit: Just realized this plugin only works with Android my bad sorry. It would be a long shot, but finding a slow transcoding service from .mov to any open video format, could help. And then, retrieve this video file?

Have fun with Ionic,

Francois

13

Can any one know how to display video with auto play in ionic 3? while same code it’s working in ionic 2. thanks in advanced.

		<video preload="auto" autoplay loop class="video bg-vidAeroplane" playsinline>
			<source src="assets/vid/convertedVideo.mp4" type='video/mp4'>
		</video>
1 Like
14

video.html

<video #video preload="auto" autoplay loop class="video bg-vidAeroplane" playsinline>
	<source src="assets/vid/convertedVideo.mp4" type='video/mp4'>
</video>

video.ts

@ViewChild("video") video: ElementRef; // binds to #video in video.html
videoElement: HTMLVideoElement

ionViewDidLoad() {
    this.videoElement = this.video.nativeElement;
    this.videoElement.play();
  }
1 Like
15

seems a right and nice code :slight_smile:

but do realise playing an mp4 video is not wanted nor desired unless you have strong bandwith =)