H.264播放器在视频播放时报错Mixed Content的问题排查与解决
TSINGSEE青犀视频开发的视频流媒体播放器EasyPlayer系列，均可支持H.264、H.265编码格式的视频播放，支持WS-flv、flv、hls、RTMP的视频流，能满足用户多场景下的播放需求。
近期有用户反馈，在使用H.264播放器时，出现了播放视频报错的情况，具体报错信息如下： Mixed Content: The page at ‘’ was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ‘’. This request has been blocked; the content must be served over HTTPS.
TSINGSEE青犀视频技术团队第一时间对该情况进行了排查。在排查过程中，我们发现用户的开发环境为HTTPS，播放的地址却是HTTP，在添加了SSL证书的HTTPS中引用了HTTP的链接，因此出现了报错。
这是因为，请求协议的不同会导致所有有关https带有http的文件或者链接（例如HTTPS页面里动态地引入HTTP资源，如js文件），会被直接block掉。在HTTPS页面里通过AJAX的方式请求HTTP资源，也会被直接block掉。
因此，针对上述问题，我们可以进行如下操作予以解决：
- 配置vue.config.js 文件关闭https，如图所示：
- 访问HTTPS资源，已经可以正常播放了，预览如图：
在我们此前的博文中，TSINGSEE青犀视频技术团队也处理过关于H.264编码视频无法播放的情况。具体可查看这里：《旧版RTSP协议网页视频无插件直播EasyNVR视频平台为什么无法播放H264编码视频？》
技术拓展：
关于H.264与H.265： H.264编码已经被广泛用于网络流媒体数据、各种高清晰电视广播等领域。因为H.264具有很高的数据压缩比率，在同等图像质量的条件下，H.264的压缩比是MPEG-2的2倍以上，是MPEG-4的1.5～2倍。
随着网络技术以及摄像机芯片处理能力的提升，安防监控高清视频720P、1080P已逐渐普及，监控领域已经开始出现4K高清视频，因此H.265应运而生。
H.265则是H.264的升级和优化，它可在有限带宽下传输更高质量的网络视频。比起H.264，H.265仅需原先的一半带宽即可播放相同质量的视频。也就是说，智能手机、平板等移动设备将能够直接在线播放1080p的全高清视频。H.265标准也可同时支持4K(4096×2160)和8K(8192×4320)超高清视频，这也将是未来的主流趋势。
如果大家还想了解更多关于我们的视频流媒体播放器及相关开发技术，可查阅往期开发文章，同时也欢迎大家持续关注我们的内容更新，或者留言与我们互动。
©著作权归作者所有：来自51CTO博客作者TSINGSEE的原创作品，如需转载，请注明出处，否则将追究法律责任更多相关文章
- 唧唧Down(B站视频下载) 彻底解决你的B站视频下载问题
- 视频：使用Docker搭建RabbitMQ环境
- uni-app实战视频点播app小程序
- 1. 为翻页按钮添加功能; 2. 当鼠标移出时,图片的每隔2秒的自动播
- js 轮播图功能：上下翻页，自动播放----0409
- 痞子衡嵌入式：基于恩智浦i.MXRT1060的MP4视频播放器(RT-Mp4Player
- 比迅雷还要快的视频下载利器You-Get
- 痞子衡嵌入式：高性能MCU之音视频应用开发那些事 - 索引
- 深度学习,机器学习视频教程