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.

Using the Page Builder, add a button block, and choose Play Media, then enter the url to your media. 

If you are using custom HTML page, add the following button code, 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 'files/my-file.ext'

To view your media, add a Button block to one of your Page Builder pages, choose Play Media, and add the url to your media. For example:

files/my-movie.mp4

If you are using a Custom HTML page, add button code like this:

<ion-button (click)="mediaModal('files/my-movie.mp4')">Play Movie</ion-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:

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

To open the media modal from an iframe page, you can use the following link:

<a class="app-media-modal" href="https://mysite.com/path-to-media.mp4">Click Here</a>

mediaModal()

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

'files/my-song2.mp3'
		

'files/my-image.jpg'
		

{title:'Morning Music', cssClass:'morning-music-modal'}