I'm currently developing a Next.js 13 application to stream IPTV from various sources. My site is set up with HTTPS, but the videos I'm trying to play are served over HTTP, causing Mixed Content issues.
Here's the problem in detail: when I try to play a video from an HTTP URL, the browser blocks the playback due to a Mixed Content error. For example, I get an error like this:
Mixed Content: The page at 'https://www.xxxxxxxx.com/' was loaded over HTTPS, but requested an insecure element 'http://xxxxxxxx.com/movie/xxxxxxx/xxxxxxx/xxxxx.mkv'. This request was automatically upgraded to HTTPS...
I tried forcing the video load to be over HTTPS by deliberately changing the internet addresses, but that didn't work because the providers aren't too fond of this, most remain on HTTP.
I'd like to avoid using a proxy server to bring the video onto my server and serve it from there, as it would put too much load on my server.
The idea of switching back to an HTTP site is unappealing to me as it would compromise the site's security.
Is there a lightweight solution, like a library or technique, that could bypass this restriction and force the browser to accept HTTP content in an HTTPS environment?
Any help would be greatly appreciated. Thank you in advance.
