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.

The easiest way to create a playlist of audio or video files is to use the Media List page type. We recommend you start there first.

If you need something more custom, you can use the media player on any custom HTML page as described below.

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>

mediaModal()

The mediaModal function opens the modal to display the media player.

Parameters Type Required Usage
media string required Audio or video URL.  Use a relative path if stored in your assets folder.
'assets/my-song2.mp3'
		
image string optional Used as a background image for the media player
'assets/my-image.jpg'
		
options object optional Two options are title and cssClass
{title:'Morning Music', cssClass:'morning-music-modal'}<br>