Playing video from various devices

Hello fellow Ionites

I would like to ask a more generic question about playing videos created from various devices.

We are building an app which has both web-app and mobile part with the later being of course based on Ionic 2.

The app allows users to upload videos recorded from their devices which other users can see.

I use media-capture plugin to record video which is then uploaded to backend, and displayed in Ionic with HTML 5 players (as well as in the web app).

But we a bit of testing we see that different videos from devices may not play in all browsers. For example my videos from Lenovo device cannot play in HTML 5 video player in ionic. They cannot play in latest Firefox (webapp) but play with sound only in Chrome. Another collegue of mine was able to record and play the video in the Ionic 2 app, but with sound only in both Firefox and Chrome.

I’m suspecting it has to do with video encoding, so I would like to ask your opinion how this issue in best handled in the real world? Video encoding in the backend when the video is uploaded? A smarter video player (in webview?) that can play more encodings?

Your en-lighting suggestions please :slight_smile:

Many thanks in advance.


This is complex, and you rapidly enter codec hell. The only two options I’ve found are: (1) learn a lot of esoteric stuff, or (2) retain a video backend as a service. A third option would be to upload everything as unlisted YouTube videos, and use a Native YouTube player, since YouTube handles multi-device encoding. That raises issues of privacy and ownership of data. But to do it “right” requires high specialization, especially if you want to eliminate as much latency as possible.

If you have a simple use case with clear parameters, maybe someone with more expertise could give you a simple solution. I only know enough to be confident that solving the general problem is hard.