Video Stream Ionic/Angular/Capacitor Application

[juanmaldonadodev]

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, https://www.youtube.com/watch?v=cKmCLenu_YI 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 https://aws.amazon.com/solutions/implementations/video-on-demand-on-aws/ 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.

• The plugin alternative https://github.com/jepiqueau/capacitor-video-player just allows us to play videos in full screen. Supports HLS format. Not sure about DASH
• The html video tag seems to not support m3u8 format.
• Video javascript libraries.

1. We have started by test video.js integration (Work in progress)
2. https://github.com/videojs/video.js/ But as you can see, many other alternatives exist: https://medium.com/@johnksmithme/top-10-best-html5-video-players-in-2019-4d5434de50a1

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?
Recommendations?