介绍：大部分浏览器不支持video.js flash加载，海康开放平台提供 了两种PC方案：1、安装视频WEB插件，适用于Windows桌面操作系统IE、Chrome、Firefox浏览器。2、H5视频播放器开发包，后端提供ws 实时视频流，适用于跨平台浏览器（windows chrome80+、Android browser）。本文只讲解H5无插件版。
1、下载海康开放平台下 H5视频播放器开发包 V2.1.2 （首先进行开发包内示例demo的测试）
2、不能直接双击demo.html启动，需要启动web服务器然后在chrome80+浏览器访问方法可参考开放包下demo使用说明！！！.txt
3、先输入后端返回的ws视频流路径 点击开始预览测试一下，普通模式报错的话切换高级模式试试。
4、将H5开发包 bin 目录下所有文件复制到到 vue 项目 public 目录下
5、public/index.html 引入 h5player.min.js
<script type="text/javascript" src="<%= BASE_URL %>h5player.min.js"></script>6、src/components 目录下 封装组件
<template>
<div class="player-box">
<div class="player" :id="id"></div>
</div>
</template>
<script>
export default {
props: {
codeUrl: {
type: String,
required: true,
},
id: {
type: String
}
},
data() {
return {
player: null,
// 1：高级模式 0：普通模式，高级模式支持所有
mode: 1,
};
},
watch: {
codeUrl: {
handler(val) {
this.realplay()
},
deep: true,
},
},
mounted() {
this.initPlayer()
},
methods: {
loadScript(src) {
return new Promise((resolve) => {
let scriptEl = document.createElement("script");
scriptEl.type = "text/javascript";
scriptEl.src = src;
scriptEl.onload = () => {
resolve();
}
document.body.appendChild(scriptEl)
})
},
/**
* 初始化播放器
*/
initPlayer() {
this.player = new window.JSPlugin({
// 需要英文字母开头 必填
szId: this.id,
// 必填,引用H5player.min.js的js相对路径
szBasePath: "./",
// 分屏播放，默认最大分屏4*4
iMaxSplit: 4,
iCurrentSplit: 1,
openDebug: true,
// 样式
oStyle: {
border: "#343434",
borderSelect: "#FFCC00",
background: "#000",
},
});
this.realplay()
},
/**
* 播放
*/
realplay() {
let { player, mode, codeUrl } = this,
index = player.currentWindowIndex;
let playURL = codeUrl
player.JS_Play(playURL, { playURL, mode }, index).then(
() => {
console.log("realplay success");
},
(e) => {
console.error(e);
}
);
},
},
};
</script>
7、项目中引入组件
<template>
<div class="app-container">
<H5player ref="player" id="player" :codeUrl="codeUrl" />
</div>
</template>
<script>
import H5player from "@/components/H5player";
export default {
components: {
H5player,
},
data() {
return {
codeUrl: 'ws://192.168.1.217:559/openUrl/OPXdBmM'
};
},
}注意：组件直接使用的是高级模式，对浏览器没有太多要求的可以使用这个H5无插件版本。打包后如果有路径报错，更改index.html 也需要查看 组件内 szBasePath: “./” 是否正确，开发过程中有报错信息，直接去官网客服粘贴报错 信息码，机器人会有报错信息说明和解决方法。