Why HTML 5 cannot play stream when using HTTPS?

Question

I have internet radio stream on the address: http://hyades.shoutca.st:8155/stream Also, I have web page radiolivade.com, and in the index.html is the following line which plays the internet radio stream

<audio controls autoplay>
<source src="http://hyades.shoutca.st:8155/stream>"
</audio>

When call http://radiolivade.com from a browser, stream music works.But, when call https://radiolivade.com, stream doesn't works, and play control is unavailable. How to fix this problem? I have plan to redirect all traffics to the https://radiolivade.com, but stream https://hyades.shoutca.st:8155/stream does not exists, only http://

Best regards,

Answer 1

Your request to HTTPS from HTTP is blocked because of Mixed Content policy. Modern browsers block by default such requests.

You verify that with tools like:

• https://www.missingpadlock.com/
• https://www.whynopadlock.com/
• https://httpschecker.net/

You bypass that and disable the error on your browser temporarily, just Google how to disable Mixed Content for your browser (for Chrome Check this). But for your users, you have to upgrade to HTTPS if you want to consume these resources. That's easier and safer for you and your users than using a proxy between your HTTP website and HTTPS resource.

You opt for free TLS certificates with let's encrypt while you get a paid one.

See more:

• Mixed Content on MDN
• How to fix a website with blocked mixed content
• What is Mixed Content