不管是基于EasyNVR还是EasyDSS，都是支持无插件直播，这也是未来视频直播的一个趋势。对于传统的浏览器插件播放谁用谁知道；
以上是软件自带播放展示
背景需求
对于EasyNVR和EasyDSS的使用方式大概分为两大类，一类是直接将软件作为视频能力平台来进行使用；另一类就是将视频能力集成到自身的业务系统来，这就涉及到相关的接口调用和一些对应的功能的集成。对与前端的web播放器的集成也是一个 需要注意的方向；通常也有很多客户会咨询到关于web播放器集成的相关问题，本篇博客也是对应web流媒体播放器的demo介绍。
解决方案
对于流媒体的web播放器有很多，不管的ckplay、flowplayer、腾讯、阿里等；我们的Easy系列软件使用的是Videojs，因此本篇主要介绍的也是Videojs如何实现HLS、RTMP流的web播放；
引用相关文件
<link rel="stylesheet" href="plugins/video-js-5.19.2/video-js.css"/>
<script src="plugins/video-js-5.19.2/video.js"></script>
<script src="plugins/video-js-5.19.2/videojs-contrib-hls4.js"></script>
<script src="plugins/videojs-hotkeys/videojs.hotkeys.min.js"></script>
<script type="text/javascript" src="plugins/jquery-3.3.1.min.js"></script>HTML部分
主要就是给videojs一个初始化的标签；
<div class="content-wrapper"><div class="video-wrapper" style="padding-bottom:56.25%;position:relative;margin:0 auto;"><div class="video-inner" style="position:absolute;top:0;bottom:0;left:0;right:0;"><video id="videojs" class="video-js vjs-default-skin vjs-big-play-centered" style="width: 100%; height: 100%;" controls preload="none"poster="" x5-video-player-fullscreen=”true”，x5-video-player-type=”h5”><source src="" type=""></source><p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p></video> </div></div></div>js部分；
播放器的初始化；
function setupPlayer(videoUrl) {videoUrl = videoUrl || "rtmp://121.40.50.44/live/stream_1";if(videoUrl.indexOf("rtmp") == 0){$("#videojs").find("source").attr("src",videoUrl).attr("type","rtmp/mp4");player = videojs("videojs",{notSupportedMessage : '您的浏览器没有安装或开启Flash,戳我开启！',techOrder : ["flash"],autoplay : true});videojs('videojs').ready(function() {this.hotkeys({volumeStep: 0.1,seekStep: 5,enableVolumeScroll: false,enableModifiersForNumbers: false});});player.on("error",function(e){var $e = $(".vjs-error .vjs-error-display .vjs-modal-dialog-content");var $a = $("<a href='http://www.adobe.com/go/getflashplayer' target='_blank'></a>").text($e.text());$e.empty().append($a);}) } else {var timeout = 10000;var step = 500;var cnt = 0;function test(){cnt += step;$.ajax(videoUrl,{type : "HEAD",global : false,complete :function(xhr,ts){if(cnt > timeout){alert("请求数据失败");return;}//xhr.status == 0 , when cross domain request not foundif(xhr.status == 404 || xhr.status == 0 || (xhr.status != 200 && !isPC())){console.log("video is no ready, waiting...");setTimeout(test,step);}else{$("#videojs").find("source").attr("src", videoUrl).attr("type","application/x-mpegURL");player = videojs("videojs",{autoplay : true}); }}})}test();}}在自身事件需要的地方调用播放器的初始化方法来完成视频播放；
以解析地址传递留地址参数来完成播放为例；
/解析传递来的参数
var $_GET = (function(){var url = window.document.location.href.toString();var u = url.split("?");if(typeof(u[1]) == "string"){u = u[1].split("&");var get = {};for(var i in u){var j = u[i].split("=");get[j[0]] = j[1];}return get;} else {return {};}})();$(function(){var VideoUrl = $_GET['url']; if(VideoUrl){setupPlayer(VideoUrl);}else{alert("请正确输入流地址！");}})效果展示
播放EasyNVR转发出来的RTMP和hls流
用http-server起一个本地的服务；
RTMP播放效果：
通过EasyNVR获取到RTMP流地址；
HLS播放效果：
通过EasyNVR获取到HLS流地址；
VideoJS官网地址：http://docs.videojs.com/
关于EasyNVR
EasyNVR能够通过简单的网络摄像机通道配置，将传统监控行业里面的高清网络摄像机IP Camera、NVR等具有RTSP协议输出的设备接入到EasyNVR，EasyNVR能够将这些视频源的音视频数据进行拉取，转换为RTMP/HLS，进行全平台终端H5直播（Web、Android、iOS），并且EasyNVR能够将视频源的直播数据对接到第三方CDN网络，实现互联网级别的直播分发；
详细说明：http://www.easynvr.com
点击链接加入群【EasyNVR解决方案】：383501345
关于EasyDSS流媒体服务器
EasyDSS商用流媒体服务器解决方案是一套集流媒体点播、转码与管理、直播、录像、检索、时移回看于一体的一套完整的商用流媒体服务器解决方案，EasyDSS高性能RTMP流媒体服务器支持RTMP推流，同步输出HTTP、RTMP、HLS、HTTP-FLV，支持推流分发/拉流分发，支持秒开、GOP缓冲、录像、检索、回放、录像下载、网页管理等多种功能，是目前市面上最合理的一款商用流媒体服务器！
详细说明：http://www.easydss.com/
点击链接加入群【EasyDSS流媒体服务器】：560148162
Copyright © EasyDarwin Team 2012-2018
