HTML audio player for mobile browsers with stream as source

Question

I use VLC media player to stream some content (audio). Right now I stream it to port 80 (http) of my PC. On a different device I open VLC and can listen to the stream by using http://192.168.0.78/ (the IP of the source computer). It plays well also on a phone when I use the VLC app to listen to the content.

Now, I try to implement a player on a website which takes the url of the stream as src and the client just opens the website and plays the stream (this has many logistic advantages). A minimal example can be viewed here. The stream runs fine on Desktop browsers but does not on run on mobile browsers. Unfortunately there is no error message or things like that which could indicate the source of the problem.

Things I tried to do:

• Using different encodings of the stream in the VLC (MP3, OGG etc.)
• Using third party HTML players like Media element, jPlayer, audio.js, Muses Radio Player and many more. All of them work fine on desktop browser, but buggy, if at all on mobile browsers
• It works on a Desktop browser when simulating a mobile browser thought F12 -> Responsive Design mode (in Firefox for example)

The site, in which I host the player runs on https, whereas the source of the stream is http. At this point I am not aware of a problem this could cause, but still mentioning it here.

Does anyone have experience with HTML players on mobile devices which take a stream as source?

Answer 1

The site, in which I host the player runs on https, whereas the source of the stream is http. At this point I am not aware of a problem this could cause, but still mentioning it here.

That is in fact the problem. If you open up your browser's developer tools, you will see error messages related to this. Pages in secure contexts can no longer load data from an insecure context.

Ideally, you need to serve your stream via HTTPS. Otherwise, you'll have to serve your page via HTTP.

Also note that you do have this same problem on desktop browsers.