Play mp4 video on android and IOS from local folder?

1

My app will have mp4 movie stored (only 3MB) in local folder and i would like it to play in app. If if try to use HTML5 tags like this it does not work (on android 4.3 movie commands are wierd and broken, but it plays video. On android 4.4 the video will not play):

<ion-content class="has-header" padding="true">
	<video controls class="video_content">
	    <source src="video/movie.mp4" type='video/mp4' />
	</video>
</ion-content>

Is there better way to embedd local video in app?
Thank you for help.

1 Like
2

I’ve experienced the same issue, it only works when the mp4 is online.

Had it work online by following these instructions: Can't play HTML5 video content on Android

Also, it appears there are known issue’s with playing mp4 locally. However, i’m a complete newbie to angularjs, cordova , just trying to help any way i can:

ref: http://www.telerik.com/forums/embedded-local-video-file-not-playing-on-android

1 Like
3

I’ve experienced the same issue too, anyone resolved or developed a workaround?

4

As we all know, Android does announce that MP4 is one of Android compatible formats. However, people still encounter the issue of Android won’t play MP4. Why? The reason is MP4 is a container format which means this format may contain various kinds of audio and video codecs while Android is only compatible with MP4 encoded with MPEG-4 or H.264 AVC.

The following step by step guide introduces a powerful tool to solve “Can’t Play MP4 on Android” issue so that you can play any MP4 files in Android phones and tablets.

5

HI!
I resolved the issue, but fails when the video is heavy (up to 5MB).

this._file.checkFile(this._file.dataDirectory, "file.mp4").then((correct : boolean) => {
                            if(correct){
                                this._file.readAsDataURL(this._file.dataDirectory,  "file.mp4").then((base64) => {
                                    this.source = this._sanitizer.bypassSecurityTrustUrl(base64);
                                    this.bo_html5 = true;
                                }).catch((err) => {
                                    console.log("VIDEO :: No se pudo recuperar el video");
                                    console.log(err);
                                });
                            } else {
                                console.log("VIDEO :: El video no pudo ser encontrado");
                            }
                        }).catch((err) => {
                            console.log("VIDEO :: Ocurrio un error al verificar si el video existe");
                            console.log(err);
                        });

<video *ngIf="bo_html5  && source!=null" width="{{width}}" height="{{height}}" controls>
        <source [src]="source" type="video/mp4">
    </video>
6

make the local server of the folder if you want to access file for mobile

below link will give a clear explanation of how to do it.

7

this.convertSrc = this.src.replace(‘file:///’, ‘http://localhost:8080/’ );

< video width=“100%” height=“100%” controls autoplay>
<source [src]=“convertSrc” type=“video/mp4”>
Your browser does not support the video tag.
< /video>