一、H5视频播放器开发包地址
1、https://open.hikvision.com/download/5c67f1e2f05948198c909700?type=20
2、内容
3、主要用demo里面的文件
4、demo可以用来测试获取的视频流是不是可以播放，如果用vue开发过，应该有安装的node,在当前页面右键-->在终端中打开
（1）两者的不同在于，http.js测试ws格式的视频流，如果生产环境是http的地址，则用这个测试，本地测试可以用这个；https.js用来测试wss格式的视频流，这个对应的是https的生产环境。
（2）下面是打开的测试wss的demo, https://localhost:9091/demo.html(这个链接对应上面)=》http =>ws； https:wss
5、将demo里面的文件拷贝在vue2项目中，在src同级目录中添加public文件夹，如果有这个文件夹，在下面新建一个文件夹（h5player），将对应的红色框里面的文件拷贝过来
6、在public文件夹下面的index.html文件中加上对插件的引入。同级目录下的js文件
7、查询视频接口；如果获取wss格式的视频流，需要给protocol传wss,获取ws格式的视频流，则传ws
8、显示视频位置
<div id="player" class="video" />
9、需要初始化插件相关信息
mounted(){
this.init()
this.initPlayer()
},
// 初始化界面大小，不同尺寸的浏览器调整窗口大小
init() {
// 设置播放容器的宽高并监听窗口大小变化
window.addEventListener('resize', () => {
if( this.player !== null){
this.player.JS_Resize();
}
}）
// 初始化播放器
initPlayer(){
this.player = new window.JSPlugin({
// 需要英文字母开头 必填
szId: 'player',
// 必填,引用H5player.min.js的js相对路径,填写的是public下的路径
szBasePath: '/h5player',
openDebug: true,
iMaxSplit: 1,// 我只展示一个视频信息
iCurrentSplit: 1,
// 样式
oStyle: {
border: '#343434',
borderSelect: '#FFCC00',
background: '#000'
}
})
10、展示视频
videoInfo(videoUrl,data){
const _this = this
const param = {
playURL: videoUrl,
// 1：高级模式 0：普通模式，高级模式支持所有
mode: 1
}
// 播放视频
_this.player1.JS_Play(videoUrl, param, 0).then(
() => {
// 由于我只用了一个位置播放，老在左上角展示，所以我重新调整了大小
_this.player1.JS_Resize();},
e => { console.error(e) }
)
// 调整窗口
_this.player1.JS_ArrangeWindow(1).then(
() => {},
e => { console.error(e) }
)
// 插件报错给出提示，要不界面没有反映
_this.player1.JS_SetWindowControlCallback({
// 插件错误回调
pluginErrorHandler(iWindIndex, iErrorCode, oError) {
_this.$publicmethod.showMessage("获取视频信息失败，请您稍后重试！", _this.$publicmethod.ErrorType)
},
});
11、部署生产环境需要有相关的配置，添加nginx的配置信息
（1）修改nginx配置信息
（2）在海康的运管中心添加一个线路，提供生产环境的ip以及nginx的端口给海康人员，让他们添加一个线路；海康开发人员都知道！
（3）将生产环境的证书和密钥上传到海康的运管中心系统，上传证书。添加并下发，下发到所有的系统中，然后重启服务即可！
三、问题汇总
1、wss返回的地址是nginx+内网地址和端口，需要在获取到视频地址的接口中，将内网地址替换成外网地址，要不报错！（websocket连接报错502）
2、如果生产环境用的是域名，需要将获取到的地址的ip替换成域名，要不提示不是可信任证书，在console中可以看到ERR_CERT相关报错
