关于uni-app H5项目使用海康视频H5播放器组件，避坑教程

键盘飞行员

于 2024-09-02 17:42:08 发布

阅读量705

点赞数 4

文章标签： uni-app 前端视频

本文链接：https://blog.csdn.net/weixin_68397463/article/details/141825098

版权

# lq-hkvideo #海康视频H5播放器组件 #uni-app

开门见山注意点：node版本不能低，14版本会报错！18版本正常使用！

一，下载导入插件海康视频H5播放器组件。

下载链接；海康视频H5播放器组件

二，下载海康H5视频播放器开发包。

下载地址：H5视频播放器开发包

三，将下载好的下载海康H5视频播放器开发包，解压后进入demo文件中，除了两个txt说明文件不用复制，其余都复制到项目的DataTransSysAPP\static\lib 这个文件夹中。

四，然后在项目根目录下建立template.html ，可参考海康视频H5播放器组件实列项目。

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>
			<%= htmlWebpackPlugin.options.title %>
		</title>
		<!-- Open Graph data -->
		<!-- <meta property="og:title" content="Title Here" /> -->
		<!-- <meta property="og:url" content="http://www.example.com/" /> -->
		<!-- <meta property="og:image" content="http://example.com/image.jpg" /> -->
		<!-- <meta property="og:description" content="Description Here" /> -->
		<script>
			var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
			document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')
		</script>
		<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
	</head>
	<body>
		<noscript>
			<strong>Please enable JavaScript to continue.</strong>
		</noscript>
		<div id="app"></div>
		<!-- built files will be auto injected -->
		<script  src="static/lib/h5player.min.js"></script>
	</body>
</html>

五，在项目的manifest.json-->源码视图，设置template.html 页面。

"vueVersion" : "2",
// 以下代码
	"h5" : {
	    "template" : "template.html"
	}

六，在你使用的海康视频插件的页面我的页面是video.vue 。

<template>
	<view class="content">
		<view class="video-box">
			<lq-hkvideo  ref="hkvideo" @change="onWindChange" @previewChange="onPreviewChange"></lq-hkvideo>
		</view>
		<view class="opt-btn">
			<button @click="startPreview">预览</button>
			<button @click="setLayout(1)">1x1</button>
			<button @click="setLayout(2)">2x2</button>
			<button @click="setLayout(3)">3x3</button>
			<button @click="setLayout(4)">4x4</button>
			<button @click="setFullScreen(true)">全屏</button>
		</view>
	
	</view>
</template>
<script>
	export default {

		data() {
			return {
				previewUrl: 'ws://192.xx.xx.xx:xxx/openUrl/he7HlcI',//实际对接从海康接口获取

			}
		},
		methods: {
			//预览
			startPreview() {
				this.$refs.hkvideo.startPreview(this.previewUrl, '测试设备').then(()=>{
                   console.log('预览成功')
                })
			},
           //分屏
			setLayout(layout) {
				this.$refs.hkvideo.setLayout(layout)
			},
            //是否全屏
			setFullScreen(n) {
				this.$refs.hkvideo.isFullScreen(false)
			},
           //选中窗口
			onWindChange(index) {
				console.log(index, 'windIndex')
			},
          //窗口预览改变
			onPreviewChange(e){
			 console.log(e,'previewChange')	
			}
			
		}
	}
</script>

<style>
	.content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
 .video-box{
	 width: 100%;
	 height: 400rpx;
 }
 .opt-btn{
	 margin-top: 50rpx;
	 display: flex;
	 flex-direction: column;
	 align-items: center;
 }

</style>

页面效果图如下