获取到海康hls的视频地址是http协议导致无法正常播放

Question

平台通过海康综合安防管理平台获取到视频地址

根据配置项获取hls格式的视频

最后给到的接口地址的http协议的，导致视频播放器不能正常播放

平台前端使用的是vue-video-play，请问这个问题该怎么解决

Answer 1

提示： 本回答参考 AIGC，由本人审核整理提供。若问题解决，望采纳；如仍有疑问，请评论回复。

问题分析

根据你提供的信息，问题主要在于从海康综合安防管理平台获取到的HLS视频地址是HTTP协议的，而现代浏览器（如Chrome）默认不允许在HTTPS页面中加载HTTP资源，这会导致视频播放器无法正常播放视频。

解决方案

1. 使用HTTPS协议

• 问题根源: 当前获取到的视频地址是HTTP协议的，导致浏览器阻止加载。
• 解决方案: 确保视频地址是通过HTTPS协议获取的。如果海康平台支持HTTPS，可以尝试配置平台以返回HTTPS地址。

2. 配置CORS（跨域资源共享）

• 问题根源: 即使视频地址是HTTPS的，如果服务器没有正确配置CORS，浏览器仍然会阻止加载。
• 解决方案: 确保海康平台的服务器配置了正确的CORS头，允许你的前端应用跨域访问视频资源。

3. 使用代理服务器

• 问题根源: 直接从海康平台获取的HTTP资源无法在HTTPS页面中加载。
• 解决方案: 可以通过代理服务器将HTTP资源转换为HTTPS资源。具体步骤如下：
  1. 在你的服务器上搭建一个代理服务。
  2. 前端请求代理服务，代理服务再去请求海康平台的HTTP资源。
  3. 代理服务将资源返回给前端，此时资源是通过HTTPS协议传输的。

4. 修改前端代码

• 问题根源: 前端代码直接使用了HTTP协议的URL。
• 解决方案: 如果无法修改后端返回的URL，可以在前端代码中进行处理。例如，使用vue-video-player时，可以在视频播放器组件中手动将HTTP URL转换为HTTPS URL。

具体实现步骤

1. 配置HTTPS

• 联系海康平台的技术支持，询问是否支持HTTPS，并进行相应的配置。

2. 配置CORS

• 在海康平台的服务器上配置CORS头，允许你的前端应用跨域访问资源。例如，在Nginx配置中添加以下内容：

  location / {
      add_header 'Access-Control-Allow-Origin' '*';
      add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
      add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
      add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
  }
  

3. 使用代理服务器

• 在你的服务器上搭建一个代理服务，例如使用Nginx反向代理：

  server {
      listen 443 ssl;
      server_name yourdomain.com;
  
      ssl_certificate /path/to/your/certificate.crt;
      ssl_certificate_key /path/to/your/private.key;
  
      location /proxy {
          proxy_pass http://183.245.39.132:83/openUrl/2kRjm10/1live.m3u8;
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header X-Forwarded-Proto $scheme;
      }
  }
  

• 前端代码中将视频地址改为代理服务的地址：

  this.$refs.videoPlayer.src = 'https://yourdomain.com/proxy';
  

4. 修改前端代码

• 在前端代码中手动将HTTP URL转换为HTTPS URL：

  let videoUrl = 'http://183.245.39.132:83/openUrl/2kRjm10/1live.m3u8';
  if (videoUrl.startsWith('http:')) {
      videoUrl = videoUrl.replace('http:', 'https:');
  }
  this.$refs.videoPlayer.src = videoUrl;
  

总结

通过以上几种方法，可以解决从海康平台获取到的HTTP视频地址无法在HTTPS页面中播放的问题。建议优先尝试配置HTTPS和CORS，如果无法修改海康平台的配置，再考虑使用代理服务器或修改前端代码。