EasyNVR网页摄像机直播方案H5前端构建之:如何播放HLS

版权声明:本文为EasyNVR技术团队原创文章,未经博主允许不得转载。 https://blog.csdn.net/EasyNVR/article/details/91817871

背景描述

HLS (HTTP Live Streaming)是Apple的动态码率自适应技术,主要用于PC和Apple终端的音视频服务,包括一个m3u(8)的索引文件,TS媒体分片文件和key加密串文件。HTML5直接支持这个流地址,因此只要是支持H5的设备都可以解码播放。

HLS视频流

问题

EasyNVR团队在进行多屏开发时,由于多屏功能不需要在手机端展示(pc端多播放为RTMP,手机端播放为HLS),因此只注意到了引用video.js来进行rtmp的播放。但实际使用中,由于项目需求不同,hls流的播放也需要体现出来。

video.js在播放rtmp时,是调用Flash来进行播放的,在播放hls时是调用h5来播放的。

<source src="hls地址" type="application/x-mpegURL">

<source src="rtmp地址" type="video/mp4">

两者主要的不同点主要在于type的形式。

解决方案

当我们在标签中引用video.js时会通过data-setup=’’;来进行控制,有时默认为空,由video.js自己来决定,但是必须要有该属性;

如果是要播放 hls 就改成:data-setup=’{“techOrder”: [“hls”]}’ ;
播放h5或flash,同理;

如果播放hls,video type 一定要是 type=“application/x-mpegURL”;

其他更多的用法请参考官网文档:http://docs.videojs.com/

专业团队

为了保障我们的服务器正常稳定运作,EasyNVR有专业的运维(售前支撑、商务咨询、售后维护)团队,随时对客户各种突发情况快速响应处理,保证互联网直播的顺利进行。我们也希望实现“0延时”,但理想丰满,现实骨感。每一个完美的直播背后都需要设备、网络、并发量等流程配合完成,正所谓“蝴蝶效应”,任何一个小环节都会对直播延时产生影响,EasyNVR团队要做的就是不断完善开发互联网直播系统,保证直播的低延时、稳定性,同时视频播放高清流畅。

专业团队

EasyNVR安防摄像机网页流媒体服务

EasyNVR是一款拥有完整、自主、可控知识产权,同时又能够具备软硬一体功能的安防互联网化流媒体服务器,能够通过简单的网络摄像机通道配置,将传统监控行业里面的高清网络摄像机IP Camera、NVR等具有RTSP、Onvif协议输出的设备接入到EasyNVR,EasyNVR能够将这些视频源的音视频数据进行拉取,转换为RTMP/HLS,进行全平台终端H5直播(Web、Android、iOS),并且EasyNVR能够将视频源的直播数据对接到第三方CDN网络,实现互联网级别的直播分发。详情可访问EasyNVR官网:http://www.easynvr.com
EasyNVR应用场景

智慧城市

EasyNVR应用场景

经典案例

猜你喜欢

转载自blog.csdn.net/EasyNVR/article/details/91817871