Ionic Video Playlist

Video Playlist for Ionic 5 using videogular2 library. Add videos to your Ionic App using Ionic 5 Full Starter App - PRO version

Display videos in Ionic

This feature is only available in the PRO version.‌

To show a video player inside the Ionic app we use Viedogular2 library. It is an HTML5 video player for Angular. Videogular is a wrapper over the HTML5 video tag, so you can just add whatever you want.‌

If you want to customize your solution, check the documentation of the library. You can change the controls of the video player and also the styles.‌

We added the styles of the library as an input of the app. That's defined in angular.json. Feel free to remove the following line if you don't want to use them.

angular.json

"styles": [
  ..... // other styles
  {
    "input": "node_modules/videogular2/fonts/videogular.css"
  }
],

Our solution looks like the following screen and it has a video that is currently playing and a playlist of other videos that can be clicked to start reproducing.‌

ionic video playlist

Also there is a Share icon that allows you to share the selected video using the native sharing API from your device. For this use case we use the Capacitor Share plugin.‌

In this example we have both local and remote videos. The sample data for this screen can be found in src/assets/sample-data/video-playlist/video-playlist.json