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.

To play media from a custom page, you can use this media player. It works for self-hosted media or offline media.

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.

Limitations

This player can only be used on custom HTML pages. 

Usage

First, you must enable media playback on native devices. Visit the Settings tab, and check "Enable Media Playback", then save.

In a custom HTML page, add the following button, edit as needed:

<button (click)="mediaModal('https://mysite.com/my-song.mp3','https://mysite.com/my-image.jpg',{title:'My Song'})">Play Song</button>

See below for explanation of the options.

Offline Media

To play media offline on a custom page, you must add the file to your app before you submit to the app stores. (Note that using a Media List, app users can download the file so you don't have to add it to the app yourself)

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 and title like this:

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

mediaModal()

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

Parameters Type Required Usage
media string required Audio, video, or PDF 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'}