我们接到过很多关于校园安防监控平台、幼儿园安防监控平台的搭建和运行项目,其中,我们的EasyNVR就在其中一个幼儿园监控中作为能力层,为项目提供视频直播分发能力。
在这个幼儿园监控项目中,有独立的APP进行统一管理,该项目需求是要在APP里调用H5的视频播放页面,却出现视频不能正常播放的问题。
APP调用H5页面出现视频无法播放
调用出来的视频画面出现黑屏,如下图:
原因分析
可以看到调用的H5地址是HTTPS协议,而视频的播放地址是HTTP协议,因此我们初步判定是因为协议不同导致的跨域问题。
为什么会出现跨域问题?协议、域名、端口三要素,任何一个不同,都会产生跨域。跨域是出于浏览器的同源策略限制,从一个源加载的文档或者脚本默认不能访问另一个源的资源。
解决方案
我们只需保证视频流的协议和浏览器的协议保持一致就可以正常播放,因此只要将流地址变成https即可播放。播放成功效果如下图:
HTTPS和HTTP区别:
http和https使用的是完全不同的连接方式,同时使用的端口也不同,http使用的是80端口,https使用的是443端口。http的连接很简单,是无状态的,而HTTPS协议是由SSL和HTTP协议构建的可进行加密传输、身份认证的网络协议要比http协议安全。