如何在播放器上加一個雲台控制界面
問題：
對於實時直播的視頻播放，
由於播放頁面客觀樣式要求（一個播放器占據了整個頁面），因此很難找出很合理的空間來放置其他功能按鈕的位置（比如配合實時是平的雲台控制界面）；
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"> </th>
</tr>
<tr>
<td>
<a onmouseout="ptzout()" onmouseover="MM_swapImage('Image18','','images/cut.png',1)" onmousedown="ptzcmdSubmit('zoomout')" onmouseup="ptzcmdSubmit('stop')"> <img src="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="images/add1.png" name="Image19" border="0" height="38" width="38" id="add" alt="近"></a>
</td>
<!--<td><img src="images/add1.png" border="0" height="38" width="38" /></td>-->
</tr>
<tr>
<th colspan="3" style=" text-align: center;color:#fff"> </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"> </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="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="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="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="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="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="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/
獲取更多信息
Copyright © EasyDarwin.org 2012-2017
