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


问题:

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

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

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

Copyright © EasyDarwin.org 2012-2017

EasyNVR H5无插件摄像机直播解决方案前端解析之:如何在播放界面添加实时云台控制界面的更多相关文章

  1. EasyNVR H5无插件摄像机直播解决方案前端解析之:监控实时直播的四分屏的前端展示

    完成运行效果图: 一.四分屏展示样式布局 1.通过html.css等来进行样式排版 根据需求的四分屏的样式:来合理的划分出四个大块,分别用于放置四个播放器: 以四等分结构为例进行前端的排版: html ...

  2. EasyNVR H5无插件摄像机直播解决方案前端解析之:关于直播页面和视频列表页面切换的问题

    关于直播页面和视频列表页面切换 为了给用户更好的用户体验,并且更好的让用户快速简洁的了解实时的视频直播信息.一般多会分为列表展示和实时的视频直播展示. 表面上只是两个视图之间的随意切换,其实切换的两个 ...

  3. EasyNVR H5无插件摄像机直播解决方案前端解析之:引用videojs无法自动播放

    关于videojs自动播放问题 播放流媒体多使用videojs来进行播放,videojs,本身自带自动播放属性: 通过添加autoplay(),来完成视频播放的自动加载: player = video ...

  4. EasyNVR H5无插件摄像机直播解决方案前端解析之:videojs初始化的一些样式处理

    初始化完成对videojs样式的调整 由于不同项目的需要,对于加载出来的videojs播放器样式也有不同的需求:我们需要自主的处理一下加载出来的videojs播放器的样式: 默认加载出来的会包含有暂停 ...

  5. EasyNVR H5无插件摄像机直播解决方案前端解析之:videojs的使用

    video.js的基本使用方法 一.videojs的初始化加载 videojs初始化加载分为两中 1.标签式加载 在引入videojs加载文件的前提下,可以在video标签中添加属性值"da ...

  6. EasyNVR H5无插件RTSP直播方案在Windows server 2012上修复无法定位GetNumaNodeProcessorMaskEx的问题

    今天遇到一个客户在使用EasyNVR无插件安防直播解决方案的时候,在Windows Server 2012上出现一个问题提示: 经过反复的查找,虽然提示上显示问题出在KERNEL32.dll上,但是已 ...

  7. 基于EasyDarwin框架实现EasyNVR H5无插件直播流媒体服务器方案

    在之前的一篇博客<web无插件播放RTSP摄像机方案,拒绝插件,拥抱H5!>中,描述了实现一套H5无插件直播方案的各个组件的参考建议,又在博客<EasyNVR H5流媒体服务器方案架 ...

  8. 基于EasyDarwin开源流媒体服务器框架实现EasyNVR H5无插件直播流媒体服务器方案

    背景分析 在之前的一篇博客<web无插件播放RTSP摄像机方案,拒绝插件,拥抱H5!>中,描述了实现一套H5无插件直播方案的各个组件的参考建议,又在博客<EasyNVR H5流媒体服 ...

  9. 基于EasyNVR摄像机无插件直播方案二次开发实现自己的摄像机IPC-NVR无插件化直播解决方案

    背景介绍 在之前的博客中<基于EasyNVR实现RTSP/Onvif监控摄像头Web无插件化直播监控>,对EasyNVR所实现的功能我们已经有较多描述,这些也在方案地址:http://ww ...

随机推荐

  1. Linux服务管理

  2. 【XLL 框架库函数】 QuitFramework

    去初使化框架库,简问题是才的重新初使化 XLOPER/XLOPER12. 参数 这个函数没有参数 属性值/返回值 这个函数没有返回值.

  3. 在浏览器输入网址到页面加载完毕中间到底发生了什么?(Browser--&gt;Server)

    最近在学习韩老师的php视频,中间有讲到发送请求到服务器返回内容,以前对这个理解并不深刻,虽然以前也知道一部分,这次听了之后收获良多:所以我就画了个流程图,从浏览器输入网址到服务器返回信息,浏览器渲染 ...

  4. C#学习(三)

    通过类创建对象的过程称为类的实例化 匿名类型提供了一种方便的方法,可用来将一组只读属性封装到单个对象中,而无需首先显式定义一个类型. 要将匿名类型或包含匿名类型的集合作为参数传递给某一方法,可将参数作 ...

  5. SVProgressHUD源码解读(2.0.3)

    SVProgressHUD是iOS开发中比较常用的一个三方库,用来在执行耗时操作或者指示用户操作结果的场合,由于使用简单,功能丰富,交互友好,被广泛应用.本文从源码的角度,解读一下实现的过程,希望能起 ...

  6. LeetCode 238. Product of Array Except Self (去除自己的数组之积)

    Given an array of n integers where n > 1, nums, return an array output such that output[i] is equ ...

  7. Python 安装包的导入

    1.安装适合的pip python安装pip的命令: python -m pip install --upgrade pip安装Python包,的确是pip最为方便了,简单快捷,因为它直接是从pypi ...

  8. Python中的引用传参

    Python中函数参数是引用传递(注意不是值传递).对于不可变类型,因变量不能修改,所以运算不会影响到变量自身:而对于可变类型来说,函数体中的运算有可能会更改传入的参数变量. 引用传参一: >& ...

  9. APACHE REWRITE ? 匹配问号的写法

    RewriteRule 不会去匹配 ? 后面的字符串,需要用RewriteCond来匹配 把 /abc?id=123  =>  /def.php?id=123 的写法:   RewriteEng ...

  10. java基础----&gt;java注解的使用(一)

    注解是众多引入到Java SE5中的重要的语言变化之一.它为我们在代码中添加信息提供了一种形式化的方法,使我们可以在稍后某个时刻非常方便的使用这些数据.今天我们就开始学习一下java中注解的知识. j ...