Html5 video fails to play a local mp4 in ios

Ionic Framework ionic-v3
1

Hi,

My question:
How to let html5 video element to play a video file (mp4) stored in the ios native storage?
In android, my code works well.

More details:

My app will download a small (~3m) mp4 file to mobile native storage and use html5 video player to play it in Ionic

The detailed steps are:

  1. using Ionic native FileTransfer to download the file to mobile native storage
  2. get the URL of the local mp4
  3. use the URL as video source in html5 video element

My issue:
The video plays well in Android, but fails to load in ios.

My troubleshooting:

    • I have inserted console.log to ensure that the mp4 has successfully downloaded in iphone to, for example
      file:///var/mobile/Containers/Data/Application/7B740AAF-C1FB-42E9-BF3F-924FAFCC78D1/tmp/myVideo.mp4, and use this Url in html5 video element.
    • I have tried to download mp4 to both tempDirectory and documentsDirectory in ios, reaching the same issue.

html

  <video id="my-player" class="video-js vjs-default-skin" playsinline src="the-mp4-local-path">
      <source [src]="the-local-mp4-path" type="video/mp4">
  </video>
2

well, I found it, and hopefully it can help followers.

Two issues actually:

  1. he /file:// prefix should be truncated out from the video Url. so videoUrl.replace(/file:\/\//g, "") is needed. (this applies to playing audio file too!)
  2. the liveload in ionic cordova run ios --device -l fails to load the local mp4 (I don’t know why). When running without -l, it works well.

a side note: liveload also generates runtime error network error page, which I have no clue either.
I think I will try find a better way other than liveload to debug my app in ios device…

3 Likes
3

Thank you so much for coming back and answering your own question for all those (like me) looking for the same thing. Your solution worked perfectly. Thank you thank you thank you!

1 Like
4

It doesn’t work for me.

Video HTML5 doesn’t play in IOS10/11 using IONIC3. It working fine in Android

I tried and removed file:/// from url but nothing change.

Please let me know if i am doing something wrong.

5

You have to be careful - just because it is a mp4 file does not means it will be accepted.
Send me an message and send you a sample video which should play OK.

6

You can take any sample video mp4 from online.

I am getting below issue while accessing file

Not allowed to load local resource: file:///Users/{username}/Library/Developer/CoreSimulator/Devices/F85E734A-3D09-4BC2-9E7F-9D79B38FEFF1/data/Containers/Data/Application/E6059384-17BA-4BBE-8DB5-DB5440657238/Library/NoCloud/Project/Intro/36.mp4

I have googled but didn’t find anything related to it.

7

thanks removing file:// allows the html5 audio or video play it

8

If someone use WKWebview, probably you need to remove cordova.file.applicationStorageDirectory from a path

9

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.

10

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>

11

If someone still facing this issue then please refer the below solution ==>

JS File =>

import { Component, ElementRef, ViewChild } from "@angular/core";
import { IonicPage, Platform } from "ionic-angular";

@IonicPage()
@Component({
  selector: "page-tutorial-video",
  templateUrl: "tutorial-video.html",
})
export class TutorialVideoPage {
  constructor(public platform: Platform) {}

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

  ionViewDidLoad() {
    if (this.platform.is("ios")) {
      const w: any = window;
      const host = w.location.href.split("index.html")[0];

      this.videoElement = this.video.nativeElement;
      this.videoElement.setAttribute("src", host + "assets/video/tutorial.mp4");
      this.videoElement.play();
    }
  }
}

HTML =>

<video
#video
preload=“auto”
controls
autoplay
src=“…/…/assets/video/tutorial.mp4”

CSS =>

 video {
    width: 100%;
    height: 100%;
  }
12

What is the point of fooling around with window and the DOM instead of just building up the video source URL in the controller and then just binding [src] in the template? That would seem more Angular-y to me.