EasyNVR摄像机网页无插件直播方案H5前端构建之：如何播放HLS（m3u8）直播流

背景描述

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

问题概述

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

智慧城市

经典案例