使用vue视频播放器上增加云台控制面板

费了半天劲，终于有效果了。赶紧记录下

html

<div :id="getPtzBlockId(index)" class="ptz-block"><div title="上" class="ptz-cell ptz-up up ptz"><i @mousedown="ptzcontrol(index,'up')" @mouseup="stopcontrol(index,'up')" class="fa fa-chevron-up"></i></div><div title="左" class="ptz-cell ptz-left left ptz"><i @mousedown="ptzcontrol(index,'left')" @mouseup="stopcontrol(index,'left')" class="fa fa-chevron-left"></i></div><div title="云台控制" class="ptz-center"><i class="fa fa-arrows"></i></div><div title="右" class="ptz-cell ptz-right right ptz"><i @mousedown="ptzcontrol(index,'right')" @mouseup="stopcontrol(index,'right')" class="fa fa-chevron-right"></i></div><div title="下" class="ptz-cell ptz-down down ptz"><i @mousedown="ptzcontrol(index,'down')" @mouseup="stopcontrol(index,'down')" class="fa fa-chevron-down"></i></div><div title="缩" class="ptz-cell ptz-plus zoomin focusing"><i @mousedown="ptzcontrol(index,'zoomin')" @mouseup="stopcontrol(index,'zoomin')" class="fa fa-plus-circle"></i></div><div title="放" class="ptz-cell ptz-minus zoomout focusing"><i @mousedown="ptzcontrol(index,'zoomout')" @mouseup="stopcontrol(index,'zoomout')" class="fa fa-minus-circle"></i></div>
</div>

css


/**播放器云台控制面板**/
.ptz-block {position: absolute;z-index: 99999;height: 220px;width: 150px;right: 20px;margin-top: 1%;text-align: center;font-size: 24px;background: hsla(0, 0%, 93%, .6);border-radius: 16px;overflow: hidden;display: none;
}/**标准控制面板**/
.ptz-block .ptz-cell{line-height: 50px;height: 50px;width: 50px;position: absolute;cursor: pointer;
}.ptz-block .ptz-up{top: 70px;left: 50px;
}.ptz-block .ptz-left{top: 120px;left: 0;
}.ptz-block .ptz-center{top: 120px;left: 50px;width: 50px;height: 50px;line-height: 50px;position: absolute;border-radius: 25px;background: hsla(0, 0%, 80%, .2);/* cursor: move; */
}.ptz-block .ptz-right{top: 120px;left: 100px;
}.ptz-block .ptz-down{top: 165px;left: 50px;
}.ptz-block .ptz-plus{top: 25px;left: 5px;
}.ptz-block .ptz-minus{top: 25px;right: 5px;
}

js

ptzcontrol:function(index,cmd){//鼠标点击控制var id = this.getPtzBlockId(index);var c=$("#"+id+" ."+cmd).css("cursor"); if(c != "default"){$("#"+id+" ."+cmd).css('color','red');control(index,cmd);}},stopcontrol:function(index,cmd){//鼠标松开停止控制var id = this.getPtzBlockId(index);var c=$("#"+id+" ."+cmd).css("cursor"); if(c != "default"){$("#"+id+" ."+cmd).css('color','#000000');control(index,"stop");}}//控制动作
function control(index,cmd){var c_data = vm.items[index].data;var ptzParam = {channel:c_data.sub_channel,command:cmd,speed:5//速度};Video.ptz.control (c_data.nvr_id,ptzParam);
}

效果

使用vue视频播放器上增加云台控制面板相关推荐

云台控制html模板,使用vue视频播放器上增加云台控制面板
费了半天劲,终于有效果了.赶紧记录下 html css /**播放器云台控制面板**/ .ptz-block { position: absolute; z-index: 99999; height: ...
视频播放器上实现AirPlay投屏功能
实现类似腾讯视频App 投影到电脑或电视上的功能先明确几个问题: 1.多屏互动功能中 iphone设备基于AirPlay协议,Android设备基于DLNA协议: 2.原理是把正在播放的视频推送到同 ...
vue 拦截器，增加token参数
1.使用请求拦截器,拦截vue所有请求,增加token参数使用倒数计时,假如token有效期60分钟,会在59分钟的时候去重新拿着refresh_Token,去请求新的token. 注意:如果一个账 ...
video标签设计vue视频播放器组件
文章目录 1.video播放器组件设计 2.在弹窗中运用视频组件 3.小结 1.video播放器组件设计啥也别说了,上代码: <template> <div><meta ...
vue视频播放器vue-video-player
npm i vue-video-player -D main.js引入 import VideoPlayer from 'vue-video-player' require('video.js/dis ...
20200228视频播放器的字幕支持
20200228视频播放器的字幕支持 2020/2/28 28 10:35 以这个视频为例子: 赌城大亨II之至尊无敌賭城大亨II之至尊無敵 (1992) magnet:?xt=urn:btih:e ...
swiftui视频_swiftui视频播放器实时处理核心图像
swiftui视频 SwiftUI in iOS 14 introduced native support for playing movie files. The new VideoPlayer c ...
视频播放器实现技术（一）
一.知识点 ES流(Elementary Stream): 也叫基本码流,包含视频.音频或数据的连续码流. PES流(Packet Elementary Stream): 也叫打包的基本码流, 是将基 ...
在Vue中自制视频播放器（上）
在Vue中自制视频播放器(上) 前言初始化组件开始/暂停按钮停止按钮静音按钮视频播放时间全屏按钮源代码前言平时大家在浏览视频网站时,会发现各大视频网站都有自己的视频控制组件,虽然浏览 ...

使用vue视频播放器上增加云台控制面板

html

css

js

使用vue视频播放器上增加云台控制面板相关推荐

最新文章

热门文章