EasyNVR H5无插件直播方案前端构建之：播放界面添加实时云台控制界面
EasyNVR H5无插件直播方案前端构建之：播放界面添加实时云台控制界面
EasyNVR
发布于 2020-04-23 15:44:05
发布于 2020-04-23 15:44:05
如何在播放器上加一个云台控制界面
问题：
对于实时直播的视频播放， 由于播放页面客观样式要求（一个播放器占据了整个页面），因此很难找出很合理的空间来放置其他功能按钮的位置（比如配合实时的云平台控制界面）；
EasyNVR配置中设有ONVIF探测功能；因此需要在视频播放界面添加了云台控制界面来展示出该功能；
EasyNVR
为了保持一个良好的用户体验，在保证不影响播放效果和播放界面的前提下，如何合理的添加云台控制界面成为一个问题。
解决：
由于页面整体的样式，在页面其他位置添加云台控制界面势必会影响整体样式美观； 向下启用空间添加云台控制界面，用会影响用户的实时体验；
在播放的播放器页面上添加一个可以手动触发展示云台控制界面的按钮，让云台界面在播放器界面浮动展示出来，云台界面实时操作结束后，可以手动关闭云台控制界面，并且不影响视频的直播。
通过定位确定好云台控制界面展示的位置，并且将云平台控制界面默认隐藏起来；再设置一个可以点击触发的按钮，通过触发按钮对云台控制界面进行展示和隐藏处理；
完成效果：
EasyNVR ONVIF
EasyNVR 展示云台控制
代码：
<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网络，实现互联网级别的直播分发；
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-08-29 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
云直播
云直播（Cloud Streaming Services，CSS）为您提供极速、稳定、专业的云端直播处理服务，根据业务的不同直播场景需求，云直播提供了标准直播、快直播、云导播台三种服务，分别针对大规模实时观看、超低延时直播、便捷云端导播的场景，配合腾讯云视立方·直播 SDK，为您提供一站式的音视频直播解决方案。