vue实现海康h5player问题汇总

已于 2024-04-30 11:33:10 修改
阅读量3.2k 收藏 11
点赞数 29
文章标签： vue.js 前端 海康
于 2024-04-10 10:15:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47925230/article/details/137584259
版权

1. 引入问题

最开始写的时候，把h5player封装成了一个组件，把资源文件随便放在了一个目录下， 直接在子组件中引入，报错window.JSPlugin is not a constructor 或者JSPlugin is not defined
初步分析应该是引入资源文件失败，查了很久才发现，资源文件应该放在public目录下，并在public下的index.html中引入资源文件，组件就能够正常找到h5player.min.js中的方法了
在这里插入图片描述
在这里插入图片描述
引用H5player.min.js的js相对目录，必填
在这里插入图片描述

2. 报错0x01730ec1

有一个好东西是海康官方在线客服，可以根据错误码查询对应的可能的原因，很好用
最开始上网查，说是时间格式问题，可是我是实时预览并不涉及到时间，就查了一下官方客服。
在调用实时预览方法JS_Play()中{}中的变量不小心大小写不一致导致参数名出错，必须是{ playURL, mode }</

最低0.47元/天 解锁文章
Xqqqqq.
关注
vue使用海康的H5视频播放器开发包实时预览监控画面
m0_68937827的博客
05-20 2830
在项目中的public文件夹下新建一个h5player的文件夹（这里的文件夹名字可以自己取，后端引入时注意一下就好了），接着将刚才下载的开发包中的bin文件夹里面所有的文件都赋值到项目中的h5player文件夹下。// // 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高。2、使用该插件很难更改其样式，只能使用其自带的窗口（1x1,2x2等），如过我要一个1x2的窗口就无法实现；// // 分屏播放，默认最大分屏4*4。
Vue集成海康威视h5视频播放器
m0_37611114的博客
03-12 2074
videoUrl：视频地址，如：ws://10.128.89.14:559/openUrl/T2jl5qo。videoWidth和videoHeight：用于定义视频容器的宽高。该组件集成了web视频的两种播放方式，预览和分屏播放。videoList：多个videoUrl的集合，分屏播放时使用。3、在public/index.html页面中引入。2、将js文件放到public目录下。1、进入海康威视官网下载开发包。
使用海康视频插件，启动失败解决办法（基于VUE）
weixin_44056717的博客
11-17 9565
问题：使用海康视频插件，插件在谷歌浏览器中启动失败问题（这个海康插件实在是坑人） 原因： 是因为海康的插件还没支持高版本谷歌，这个原因 我是醉醉的。 解决办法： 使用低版本谷歌浏览器（94版本以下） 在谷歌浏览器中地址栏输入 chrome://flags/ ， 搜索secure，找到 Allow invalid certificates for resources loaded from localhost（启用它），找到Block insecure private network requests.（禁
海康威视H5player问题汇总大全
人与人之间最小的差别是智商，最大的差别是坚持。
01-03 933
由于除了要支持Windows平台，还要支持国产系统的平台，这时就用到了H5player，但是这个在使用调试的时候会遇到各种各样的问题，便在此分享一下，供大家分享！！！
vue2使用海康威视 H5player 四分屏，云台控制，切换页数
最新发布
W49467的博客
03-11 681
分屏的时候 屏幕尺寸变小的时候，出现了视频缩小占不满的情况 打开控制台发现出现了一个属性transform: rotate(0deg) scale(0.5);大屏情况下是没有 scale(0.5) 的。把 bin 文件夹下的复制到自己的项目中 （我是放在了根目录下的public文件夹下，新建了一个h5player文件夹）解决方法：删除了源码中的scale(0.5)实现四分屏的视频展示，云台控制，换页切换。在index.html 下进行引入。
Windows窗口消息大全
人生几何的博客
03-11 686
////////////////////////////////////////////////////////////////////////// #include "AFXPRIV.H"//消息值的定义来源 #include "Dde.h"//DDE消息值的定义来源 #include "CPL.H"//控制面板消息值的定义来源 #include "WFEXT.H"//文件管理器的消息值...
vue项目接入海康威视H5player.js 2.0版（回放示例）
热门推荐
qq_31404277的博客
01-19 2万+
概要 公司项目接入海康威视的球形监控设备，需要项目支持使用海康威视监控视频，以及视频回放等功能。项目要求无插件接入，使用户体验最佳。所以采用海康威视的h5player.js，因为接入时，海康威视的js版本已经2.0，在网上没找到其他博客，所以特此记录。 环境搭建 因为被环境问题搞了好几次，所以特别在此提醒各位同学，在开发之前一定先把环境调好（真的会被搞死的，搞得我头都大了） 首先确认自身项目所在环境（http还是https），在http环境下使用ws协议，在https环境下使用wss协议，两者有严格区分，
vue使用海康h5player
LovelyLittleCub的博客
12-01 3553
在public下面创建文件夹，文件名称可以自己起名字，我这里的是lib下面的js，然后把demo文件下的这些文件复制到所创建的文件夹下，最后在public/index.html引入所需要的文件。点击树状图然后打开相应的视频，可以指定窗口切换，并在此基础上实现视频播放、关闭视频、开启声音、关闭声音、分屏以及云台操作（包括左右移动、上下移动以及缩放）里面播放的内容就不展示了，大致效果就是这个样子了。使用的海康web插件：由。
vue项目接入海康威视H5player.js
我只是个很菜的前端
02-15 5073
vue项目接入海康威视H5player.js
海康平台h5播放插件。
04-06
支持websocket视频流
vue项目接入海康威视H5player
2401_87029798的博客
09-10 597
pluginErrorHandler: function (iWndIndex, iErrorCode, oError) { //插件错误回调。firstFrameDisplay: function (iWndIndex, iWidth, iHeight) { //首帧显示回调。windowEventUp: function (iWndIndex) { //鼠标mouseup事件回调。windowEventOut: function (iWndIndex) { //鼠标移出回调。
vue-h5-musicPlayer
04-13
msc 基于vue + muse—ui 写的一套h5端音乐播放器，实现了创建歌单，往歌单中上传音乐，收藏歌单或单曲等功能。 演示地址 我的邮箱： 手机扫码体验： 配套后端项目地址： Project setup npm install Compiles and hot-reloads for development npm run dev Compiles and minifies for production npm run build
海康威视h5player.js 2.0版demo压缩包
01-19
海康威视h5player.js 2.0版demo压缩包
H5播放器播放海康摄像头视频开发包和demo
01-20
H5播放器播放海康摄像头视频开发包和demo
海康h5player2.1.3监控播放插件
05-31
“使用说明.txt”可能涵盖了插件的基本操作步骤和常见问题解答，对于终端用户来说，这是快速上手使用海康H5Player的重要指引。而“适用版本说明.txt”则可能列出了该插件兼容的操作系统、浏览器版本等信息，确保用户...
vue对接海康播放器插件组件
09-07
本项目是关于如何在Vue项目中集成海康播放器插件组件，以实现监控视频的播放功能。 首先，我们要理解Vue组件的基本概念。Vue组件是可重用的代码块，可以被视为小型自包含的应用，它们可以组合起来创建复杂的用户...
海康监控vue3播放器组件
05-07
【海康监控vue3播放器组件】是一款专为Vue3框架设计的H5播放器组件，旨在方便开发者在Web应用中集成海康监控设备的视频流播放功能。Vue.js是一种流行的JavaScript前端框架，以其轻量级、易用性和组件化特性受到广大...
Web前端最新vue项目接入海康威视H5player，腾讯前端面试题
2401_84435885的博客
05-09 461
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】在页面中使用//下方为海康视频播放器所需变量。
vue2项目 使用海康视频h5player@2.0版本
weixin_53322542的博客
11-14 3341
注意： szBasePath: "/h5player", 引用的路径里必须包含第一步里所有的文件 不然就会出现各种报错（我就是 找了好长时间才发现是文件找不到报的错误）下载之后我们把下载的文件打开把bin里的文件移动到pubilc文件里，可以自己单独建一个文件放在里面。之后我们就需要在pubilc里的index.html文件里引用。这个 封装的代码样式是我项目用到的 到时候自己自行修改样式。下载h5player@2.0版本的一些用到的文件。这里是组件方法的调用播放 我当时只用到了播放。
vue 海康h5player
11-04
Vue 海康 H5Player 是一种基于 Vue 框架的海康威视播放器组件。海康威视是中国领先的视频监控解决方案提供商，他们的 H5Player 是一种用于在浏览器中播放海康威视摄像头视频的技术。 Vue 是一种用于构建用户界面的 JavaScript 框架，它提供了一套易于使用的工具和功能，帮助开发者快速构建动态、交互性的前端应用程序。Vue 框架使用了虚拟 DOM 和单向数据流的概念，简化了前端开发的复杂性。 海康 H5Player 结合了海康威视的视频监控技术和 Vue 框架的优势，提供了一个易于集成和使用的播放器组件。使用 Vue 框架的优势是可以将播放器组件与其他 Vue 组件进行混合使用，实现更灵活的界面设计和功能扩展。 在使用 Vue 海康 H5Player 进行视频播放时，可以通过传递参数来设置需要播放的视频流地址、窗口布局、控制条样式等。播放器组件还提供了丰富的事件和方法，可以实现视频的控制、抓图、录像等功能。 总之，Vue 海康 H5Player 是一种方便易用的海康威视摄像头视频播放器组件，结合了 Vue 框架的优势，为开发者提供了快速集成和定制的解决方案。无论是在安防行业还是其他需要视频监控的领域中，Vue 海康 H5Player 都是一个强大的工具。
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值