Media Player

There are many ways to play media in your app, the easiest is to embed video or audio from another source such as YouTube or Soundcloud.

If you want a customized media player that works offline, you can use this media player.

Limitations

This player only works on custom HTML pages. You must add your media files to the offline assets, which increases your app size considerably. We don't recommend doing this for more than a few media files, otherwise your app will be too large.

Usage

First, upload your media in the app customizer under the Settings tab, where it says App Assets. Zip all of your media files together into a .zip file, and upload it here.

After rebuilding your app, these files will be available at the path 'assets/my-file'

Next, create a new custom HTML page in the app customizer under Custom Pages.

In the HTML field, add a click function into an element (such as a button) like this:

<button (click)="mediaModal('assets/my-movie.mp4')">Play Movie</button>

Add the custom page to your menu, and rebuild your app. Clicking this button will play your media file.

You can also use .mp3 files to play audio, and add an optional placeholder image like this:

<button (click)="mediaModal('assets/my-song.mp3','assets/my-image.jpg')">Play Movie</button>

Audio Playlist

Another example would be creating a list of items, like you would see in iTunes or another music player:

<ion-list>
  <ion-item (click)="mediaModal('assets/my-song1.mp3')">
<ion-icon item-left name="play"></ion-icon>
Play Song 1
  </ion-item>
  <ion-item  (click)="mediaModal('assets/my-song2.mp3','assets/my-image.jpg')">
<ion-icon item-left name="play"></ion-icon>
Play Song 2
  </ion-item>
  <ion-item  (click)="mediaModal('assets/my-song3.mp3','assets/my-image2.jpg')">
<ion-icon item-left name="play"></ion-icon>
Play Song 3
  </ion-item>
</ion-list>