EasyNVR、EasyDSS二次开发之：RTMP、HLS流在web页面进行无插件播放示例Demo代码

不管是基于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 found

                        if(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