如何在HTTPS网站播放HTTP协议的.m3u8直播视频流？

核心原因 #

HTTPS页面加载HTTP资源属于混合内容，现代浏览器出于安全默认会阻止这类跨协议请求，这就是你用video元素无法播放的直接原因。

可行解决方案 #

1. 把家庭设备的直播流转为HTTPS输出 #

• 给家庭设备配置SSL证书（比如免费的Let's Encrypt证书），让它直接输出HTTPS协议的m3u8流。如果设备本身不支持自定义证书，可在家庭网络内搭一个反向代理（如Nginx），由代理层提供HTTPS服务，中转设备的HTTP流。
• 示例Nginx配置片段：

  server {
      listen 443 ssl;
      server_name your-public-domain.com;
  
      ssl_certificate /etc/letsencrypt/live/your-public-domain.com/fullchain.pem;
      ssl_certificate_key /etc/letsencrypt/live/your-public-domain.com/privkey.pem;
  
      location /live-stream {
          proxy_pass http://your-local-device-ip:port/device-m3u8-path;
          proxy_set_header Host $host;
          proxy_set_header X-Forwarded-For $remote_addr;
      }
  }
  

• 注意：需要将家庭设备的对应端口映射到公网，同时把域名解析到你的公网IP。

2. 用公网HTTPS代理中转流 #

• 若不想改动家庭设备，可在公网服务器上搭建一个HTTPS代理服务，专门中转家庭设备的HTTP m3u8流。代理以HTTPS接收前端请求，内部用HTTP拉取家庭设备的流，再返回给前端。这样前端请求的是HTTPS资源，不会触发混合内容限制。
• 可以用Node.js快速实现一个简单代理，或者用现成的代理工具，核心逻辑是完成协议转换与流转发。

3. 临时调试方案（仅本地测试用） #

• 如果你只是自己本地调试，可在Chrome浏览器中临时允许混合内容：点击地址栏的锁图标 → 网站设置 → 不安全内容 → 选择“允许”。但此方法仅适合个人测试，普通用户访问网站时仍会被浏览器阻止。

内容的提问来源于stack exchange，提问作者zisforzubaz