EasyNVR H5无插件摄像机直播解决方案前端解析之：如何在播放界面添加实时云台控制界面

如何在播放器上加一个云台控制界面

问题：

对于实时直播的视频播放，

由于播放页面客观样式要求（一个播放器占据了整个页面），因此很难找出很合理的空间来放置其他功能按钮的位置（比如配合实时是平的云台控制界面）；

EasyNVR配置中设有ONVIF探测功能；因此需要在视频播放界面添加了云台控制界面来展示出该功能；

为了保持一个良好的用户体验，在保证不影响播放效果和播放界面的前提下，如何合理的添加云台控制界面成为一个问题。

解决：

由于页面整体的样式，在页面其他位置添加云台控制界面势必会影响整体样式美观；

向下启用空间添加云台控制界面，用会影响用户的实时体验；

在播放的播放器页面上添加一个可以手动触发展示云台控制界面的按钮，让云台界面在播放器界面浮动展示出来，云台界面实时操作结束后，可以手动关闭云台控制界面，并且不影响视频的直播。

通过定位确定好云台控制界面展示的位置，并且将云平台控制界面默认隐藏起来；再设置一个可以点击触发的按钮，通过触发按钮对云台控制界面进行展示和隐藏处理；

完成效果：

代码：

 <div class="player-wrapper" style="margin:0 auto;width:80%;position:relative;">

                <div class="row" style="position:absolute;top:50%;margin-top:-120px;bottom:0;right:0;z-index:999;overflow: hidden;">

                    <div class="col-sm-5" style="margin-left:20px;width:100%;display:none;overflow: hidden;" id="ipcam_div">

                        <div id="ipcam_control" class="ipcam_control" style="float:left;display:none;">

                            <table width="auto" border="0" align="center" cellspacing="0">

                                <tbody>

                                    <tr>

                                        <th colspan="3" style=" text-align: center;color:#fff">云台控制</th>

                                    </tr>

                                    <tr>

                                        <th colspan="3" style=" text-align: center;color:#fff">&nbsp;</th>

                                    </tr>

                                    <tr>

                                        <td>

                                             <a onmouseout="ptzout()" onmouseover="MM_swapImage('Image18','','images/cut.png',1)" onmousedown="ptzcmdSubmit('zoomout')" onmouseup="ptzcmdSubmit('stop')"> <img src="data:images/cut1.png" name="Image18" border="0" height="38" width="38" id="cut" alt="远"></a>

                                        </td>

                                        <td>　</td>

                                        <td>

                                             <a onmouseout="ptzout()" onmouseover="MM_swapImage('Image19','','images/add.png',1)" onmousedown="ptzcmdSubmit('zoomin')" onmouseup="ptzcmdSubmit('stop')"> <img src="data:images/add1.png" name="Image19" border="0" height="38" width="38" id="add" alt="近"></a>

                                        </td>

                                        <!--<td><img src="data:images/add1.png" border="0" height="38" width="38" /></td>-->

                                    </tr>

                                    <tr>

                                        <th colspan="3" style=" text-align: center;color:#fff">&nbsp;</th>

                                    </tr>

                                    <tr>

                                        <th colspan="3" style="color:#fff;border:1px dashed #fff;margin:0 4%;"></th>

                                    </tr>

                                    <tr>

                                        <th colspan="3" style=" text-align: center;color:#fff">&nbsp;</th>

                                    </tr>

                                    <tr>

                                        <td>　</td>

                                        <td>

                                            <a onmouseout="ptzout()" onmouseover="MM_swapImage('Image20','','images/u.png',1)" onmousedown="ptzcmdSubmit('up')" onmouseup="ptzcmdSubmit('stop')"> <img src="data:images/u1.png" name="Image20" border="0" height="38" width="38" id="up" alt="上"></a>

                                        </td>

                                        <td>　</td>

                                    </tr>

                                    <tr>

                                        <td>

                                            <a onmouseout="ptzout()" onmousedown="ptzcmdSubmit('left')" onmouseup="ptzcmdSubmit('stop')" onmouseover="MM_swapImage('Image22','','images/l.png',1)"> <img src="data:images/l1.png" name="Image22" border="0" height="38" width="38" id="left" alt="左"></a>

                                        </td>

                                        <td>

                                             <a onmouseout="ptzout()" onmousedown="ptzcmdSubmit('home')" onmouseover="MM_swapImage('Image23','','images/h.png',1)"> <img src="data:images/h1.png" name="Image23" border="0" height="38" width="38" id="center" alt="居中"></a>

                                        </td>

                                        <td>

                                            <a onmouseout="ptzout()" onmousedown="ptzcmdSubmit('right')" onmouseup="ptzcmdSubmit('stop')" onmouseover="MM_swapImage('Image24','','images/r.png',1)"> <img src="data:images/r1.png" name="Image24" border="0" height="38" width="38" id="right" alt="右"></a>

                                        </td>

                                    </tr>

                                    <tr>

                                        <td>　</td>

                                        <td>

                                            <a onmouseout="ptzout()" onmousedown="ptzcmdSubmit('down')" onmouseup="ptzcmdSubmit('stop')" onmouseover="MM_swapImage('Image26','','images/d.png',1)"> <img src="data:images/d1.png" name="Image26" border="0" height="38" width="38" id="down" alt="下"></a>

                                        </td>

                                        <td>　</td>

                                    </tr>

                                </tbody>

                            </table>

                        </div>

                        <div style="float:left;" onclick="showCont()">

                            <img src="data:images/show1.png" border="0" width="100%" id="Photo"/>

                        </div>

                    </div>

                </div>

                <div class="video-wrapper" style="padding-bottom:55%;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>

            function showCont(){

                    if ($("#ipcam_control").is(":hidden")) {

                        $("#ipcam_control").show("fast");

                        $("#Photo").attr("src","images/show2.png")

                    }else{

                        $("#ipcam_control").hide("fast");

                        $("#Photo").attr("src","images/show1.png")

                    }

                }

对于云台控制功能的实现，可以通过触发云台控制界面对应的功能按钮，调用对应的接口来实现功能；

EasyNVR云台控制中包含了控制摄像头上、下、左、右的转动，停止功能和焦距的调节等。

关于EasyNVR

EasyNVR能够通过简单的网络摄像机通道配置，将传统监控行业里面的高清网络摄像机IP Camera、NVR等具有RTSP协议输出的设备接入到EasyNVR，EasyNVR能够将这些视频源的音视频数据进行拉取，转换为RTMP/HLS，进行全平台终端H5直播（Web、Android、iOS），并且EasyNVR能够将视频源的直播数据对接到第三方CDN网络，实现互联网级别的直播分发；

详细说明：http://www.easydarwin.org/easynvr/

获取更多信息

邮件：support@easydarwin.org

WEB：www.EasyDarwin.org