Include non-secure steaming URL in HTTPS site

Question

I have a HTTPS enabled site, I use a javascript/html5 audio plugin to stream mp3 here. Chrome and other browsers are blocking streaming url as insecure contents. User needs to ALLOW BLOCKED CONTENT manually.

My Site : https://www.domain.com
Streaming URL : http://100.160.240.230:8000/high

Javascript code snippet :

<script type="text/javascript">
$(document).ready(function(){
   var stream = { mp3: "http://100.160.240.230:8000" },
   ready = false;   $("#jquery_jplayer_1").jPlayer({
   ready: function () {ready = true; $(this).jPlayer("setMedia", stream).jPlayer("play"); },
   pause: function() {$(this).jPlayer("clearMedia");}, error: function(event) {
    if(ready && event.jPlayer.error.type === $.jPlayer.error.URL_NOT_SET) {
        $(this).jPlayer("setMedia", stream).jPlayer("play"); }},
   solution: "flash, html", swfPath: "/player/flash/player.swf", supplied: "mp3" });});
</script>

Is there anyway to solve it without having a secure streaming url? I really can't manage a secure steaming url now.

Answer 1

As @deceze mentioned, once you commit to HTTPS; there is no way browsers will allow you to display mixed content. If you are willing to buy a domain or create a subdomain (cheap, I guess), Then

1. Point your server to that domain.
2. Use services like Cloudflare, who give you https (free). https://www.cloudflare.com/plans/.

So, all the info being passed through, will be from cloudflare HTTPS servers, you wont get those mixed content warnings.

I am assuming, that the IP is publicly accessible.

Hope that helps!