HTTPS页面嵌入HTTP视频的3种解决方案

文章目录

• • 需求
  • 分析
  • • 1. 升级视频地址到 HTTPS
    • 2. 在服务器端配置代理
    • 3. 其他问题

需求

当前浏览器中的地址是 HTTPS开头的，但是需要嵌入一个 HTTP 的视频链接

分析

在HTTPS页面中直接访问HTTP链接内容会引发混合内容问题，浏览器通常会阻止这种请求以确保安全性。以下是几种解决在 HTTPS 网页下访问该视频的方法：

1. 升级视频地址到 HTTPS

如果服务器支持，将视频地址从 http:// 升级到 https://，这样就不存在混合内容的问题了。但需要注意的是，这需要服务器端配置好 SSL 证书并支持 HTTPS 访问。

例如，假设服务器已经配置好 HTTPS 访问，视频地址变为 https://182.92.106.16:41062/rtp/410105000001_3402000000002.live.mp4?originTypeStr=rtp_push。

在 HTML 中使用 标签加载视频的示例代码如下：

<video controls> <source src=\"https://182.92.106.16:41062/rtp/4101050000001_3402000000002.live.mp4?originTypeStr=rtp_push\" type=\"video/mp4\"> 你的浏览器不支持视频播放。</video>

2. 在服务器端配置代理

如果无法直接将视频地址升级到 HTTPS，可以在服务器端配置反向代理，将 http:// 的视频请求转发为 https:// 的请求（如果服务器端支持这种配置）。

1. 验证后端服务器是否在线
   从 Nginx 服务器所在的主机直接访问后端服务器：

curl -v http://182.92.106.16:41062/rtp/41010502000001_34020012000002.live.mp4

以 Nginx 为例，配置示例如下：

server { llisten 41010 ssl;server_name 127.0.0.1 192.168.10.145 tit.my03.com;ssl_certificate E:/titgroup/zzsk/zs/mycertificate.crt; ssl_certificate_key E:/titgroup/zzsk/zs/myprivatekey.pem; location ^~ /video/ { proxy_pass http://182.92.106.16:41062/; }}

在上述配置中，/video 路径会将请求转发到 http://182.92.106.16:41062，然后在 HTML 中使用代理后的路径来加载视频：

<video controls> <source src=\"/video/rtp/4101050001_34000000002.live.mp4?originTypeStr=rtp_push\" type=\"video/mp4\"> 你的浏览器不支持视频播放。</video>

3. 其他问题

1. 资源请求返回值为 206：表示nginx中未配置代理转发
2. 资源请求返回值为 503：检查所调取的资源是否在线
3. 资源请求返回值为 403：检查代理中是否包含其他内容，我在删除以下内容后就访问到资源了
   

太奇考研