vue项目引用海康视频插件(web1.5),el-date-picker下拉选择时间面板会被遮盖问题解决。

这篇具有很好参考价值的文章主要介绍了vue项目引用海康视频插件(web1.5),el-date-picker下拉选择时间面板会被遮盖问题解决。。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、海康插件浮窗的层级,会把项目中时间控件中的时间选择面板挡住,导致时间面板显示不全,无法选择时间。如图所示:

vue项目引用海康视频插件(web1.5),el-date-picker下拉选择时间面板会被遮盖问题解决。

二、解决办法:调用API中的JS_JS_CuttingPartWindow(iLeft, iTop, iWidth, iHeight )方法,

<el-date-picker
v-model="startTimeStamp"
type="datetime"
placeholder="选择日期时间"
size="small"
style="width:182px"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
@focus="startTimeFocus"
@blur="startTimeBlur"
>
</el-date-picker>
 startTimeFocus() {
      if (this.oWebControl) {
        this.oWebControl.JS_CuttingPartWindow(0, 98, 134, 435);
      }
    },
startTimeBlur() {
   if (this.oWebControl) {
    this.oWebControl.JS_RepairPartWindow(0, 98, 134, 435);
  }
}

三、效果图

vue项目引用海康视频插件(web1.5),el-date-picker下拉选择时间面板会被遮盖问题解决。

四、API接口文档

vue项目引用海康视频插件(web1.5),el-date-picker下拉选择时间面板会被遮盖问题解决。

vue项目引用海康视频插件(web1.5),el-date-picker下拉选择时间面板会被遮盖问题解决。

大致意思就是当点击时间控件出现时间选择面板的时候把视频插件裁剪掉,时间控件失去焦点时再缝补回去,这种操作就不需要重新初始化插件的。

五、参考链接

https://www.cnblogs.com/ymhweb/p/15650902.html文章来源地址https://www.toymoban.com/news/detail-511387.html

到了这里,关于vue项目引用海康视频插件(web1.5),el-date-picker下拉选择时间面板会被遮盖问题解决。的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue中web端播放rtsp视频流(摄像头监控视频)(海康威视录像机)

    ffmpeg下载 https://ffmpeg.org/download.html 找ffmpeg-release-essentials.zip点击下载,下载完解压 ffmpeg.exe 程序运行 添加成功后验证是否生效任意地方打开cmd窗口输入 ffmpeg 打印如下表示成功 新建一个app.js文件,同级目录下npm安装 node-rtsp-stream 我是直接写在项目里了,你们可以单独写在外

    2024年04月25日
    浏览(36)
  • 在VUE框架的WEB网页端播放海康威视RTSP视频流完全方案

    1.服务器转流前端转码方案 服务器端先把RTSP流用Web Socket或WebRTC推送到前端,再通过WASM转码MP4播放。此方案虽号称是无插件方案,但是需要服务器支持,两次转码导致延迟较高,一般高达数秒甚至数分钟。此方案首屏画面显示很慢。因为需要服务器不断转码转流,对CPU和内存

    2024年02月05日
    浏览(28)
  • 海康威视的视频web端(vue开发)的实时预览、录像回放和页面拖拽

    效果图 一、实现步骤 1. 安装海康web插件 去海康威视官网上下载,官方不支持Mac,只支持Windows https://open.hikvision.com/ 2. 配置引入 在index.html引入js文件,安装包里面有 3. 兼容性 可兼容谷歌、火狐、360、edge 4. 代码实现 5. 开发中遇到的问题及解决方法 创建实例失败时重新唤起插

    2024年02月04日
    浏览(41)
  • vue2项目 使用海康视频h5player@2.0版本

    一、下载开发包         我们需要去海康官网下载h5player@2.0版本的一些用到的文件 二、引入开发包         下载之后我们把下载的文件打开把bin里的文件移动到pubilc文件里,可以自己单独建一个文件放在里面 注意:一定要放在vue中的public文件夹中 否则会报错 三、引用下载

    2024年02月03日
    浏览(36)
  • 海康WEB3.3控件开发包 V3.3 前端vue项目调用实时监控画面

    公司业务迭代, 需要前端vue项目里增加一个查看实时监控模块, 这个需求是之前离职的前端小哥没有研究明白的, 现在落在了我的肩上, 压力还是有的. 但是压力归压力, 问题还是要解决的. 第一步: 调研大佬们已经实现的方案, 找设备对接. 公司后端大佬提出用官方SDK稍加修改即

    2024年02月08日
    浏览(31)
  • 海康web插件技术文档

    前情提要:本技术文档基于我司石衡项目视频监控页面的应用进行总结。 石衡项目是基于vue2,使用Element-ui + 海康web插件 + Echarts + GIS的集成项目。 视频监控实现的主要功能: 路段中所有摄像头树状显示和检索 双击摄像头进行画面预览查看 预览模式和回放模式的切换

    2024年02月09日
    浏览(61)
  • web,h5海康视频接入监控视频流记录一

    项目需求,web端实现海康监控视频对接接入,需实现实时预览,云台功能,回放功能。 web端要播放视频,有三种方式,一种是装浏览器装插件,一种是装客户端exe,还有就是无插件了。浏览器装插件很早前已经行不通了,chrome42还是44之前的可以。客户端装软件,一般接受度

    2024年02月15日
    浏览(31)
  • 海康实时监控预览视频流接入web

            我们采取的方案是后端获取视频流返回给前端,然后前端播放 根据官方文档传输对应的参数  官方接口限制:为保证数据的安全性,取流URL设有有效时间,有效时间为5分钟。 注意不同协议的限制不同,rtsp没得限制但前端播放麻烦,web端展示的话ws比较好 海康开放平

    2024年04月17日
    浏览(29)
  • vue3实现海康威视根据海康插件进行监控实时预览和回放功能

    因为我的文章已经写过基于vue实现海康web插件进行视频播放开箱即用文章,这个文章是利用 vite+vue3+js 进行编写的,大致内容跟vue2一样,拿过去能直接用。 至于我为什么要用js而不用ts,因为海康提供的三个脚本为js语言的,ts尝试过一次,我道行太浅,没搞明白。 这些代码是

    2024年02月05日
    浏览(56)
  • 【Springboot + Vue 视频播放web项目】解决视频播放只有声音没有画面

    使用vue-video-player作为视频播放插件,捣鼓挺久de了一堆bug之后终于能读取本地MP4视频文件,但是只有声音没有画面 前端也是能够正确地根据url找到文件,音频也是正确的 经过前端堂哥的指点,首先把上面这个url直接输入到浏览器,看能不能正常播放,结果也是只有声音没有

    2024年02月16日
    浏览(32)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包