Video Stream Ionic/Angular/Capacitor Application

Hello, We have a hybrid application working with Ionic 5 and Angular 11 using Capacitor version 4.

We want to implement play videos from the App.

Reviewing the different options we have some doubts.

First, we think that we should implement video play by supporting the stream formats HLS or DASH. Not sure yet which one would be better.

We have found some tutorials that allow us to play videos in format .mp4 but loaded from our own app path. Just using HTML 5 video tag.

For example, How Capture, Save and Play Videos with Capacitor inside PWAs - YouTube Although it is mentioned that is just supported in PWA and not in native builds.

Anyway, We think that we should support .m3u8 format files instead of just mp4 files. In order to support HLS or DASH stream protocols to not just depend on having videos inside the application.

So our idea is to use our current CDN. We are currently using AWS cloudfront services to server images. So the next step is to add videos and implement Video on Demand on AWS Foundation Video on Demand | Implementations | AWS Solutions what ends on a CDN serving m3u8 files that allow us to server videos using HLS or DASH stream protocols.

We know that there are other alternatives to server videos. But this would be our case.

As a conclusion, we want to play videos in our capacitor app by HLS or DASH protocol, so that means that we require to play videos in format m3u8 from the App.

Problems that we have found.

  1. We have started by test video.js integration (Work in progress)
  2. GitHub - videojs/video.js: Video.js - open source HTML5 video player But as you can see, many other alternatives exist: Top 10 Best HTML5 Video Players For 2023[Updated] | by John Smith | Medium

So we decide to ask here looking for obtaining more information and other experience with Video Stream with Ionic/Capacitor App.

Can Ionic/Capacitor App support HLS/DASH play videos in Android/iOS with embedded videos?