解决海康HLS视频流在PC浏览器上播放问题

背景:我司用了海康视频监控平台,有一台MAG服务器节点,通过该服务器可以转换成HLS流(苹果的一种视频流协议可以看下别人的介绍)

HLS 详解_一个人的旅行的博客-CSDN博客 

问:为什么不用RTSP 或者RTMP 或者sdk模式来对接

答:首先我司摄像头品牌不一样,流也有上限,如果要网页播放还需要自己搭建转流服务器和推流服务器,技术实现复杂和时间上的限制。

需求:浏览器上播放我司实时视频流(延迟6秒左右),最终通过其他博主和同事帮助解决了该需求

遇到的第一个问题:PC上无法播放HLS流

通过HTML 的vdieo 标签来播放发现PC上浏览器无法播放,而苹果浏览器和移动平台没有问题,

解决方案:HLS.js,通过百度发现需要第三方解码来解决(PC浏览器播放HLS协议的视频_weixin_33991727的博客-CSDN博客

常用的有 ckplayer,video.js 等 我这边选用轻量级的HLS.js

遇到的第二个问题:集成了HLS.js后还是无法播放 ,原因是浏览器为了安全阻止了跨域访问资源问题(浏览器的跨域问题以及解决方案 - RemateDanpike - 博客园 (cnblogs.com)

 解决方案:

安装第三方allow CORS Chrome插件后解决,具体效果如下

原文地址:https://www.cnblogs.com/mlwork/p/14236154.html