共计 4393 个字符，预计需要花费 11 分钟才能阅读完成。
最近公司我的项目须要接入海康视频监控，先后应用了 easyplayer.js(只能播放海康视频的 hls 视频流，加载很慢，放弃), 海康自带 WEB 插件 (须要用户装置插件，放弃)，最终决定应用海康 H5player.js 插件，应用版本 V2.12，供大家参考。
1. 官网下载 H5 视频播放器开发包
文件里有开发指南及应用阐明，参考启动没有问题后，筹备嵌入我的项目
2. 把 demo 嵌入 vue 我的项目 public 文件夹中
3. 在 public/index.html 中引入 js 动态资源
<script src="<%= BASE_URL %>js/h5player.min.js"></script>4. 在 vue 中应用
<div id='player'></div>
//script
const IS_MOVE_DEVICE = document.body.clientWidth < 992 // 是否挪动设施
const MSE_IS_SUPPORT = !!window.MediaSource // 是否反对 mse
//data()
// 海康视频参数
player: null,
splitNum: 1,
mseSupport: MSE_IS_SUPPORT,
// tabActive: MSE_IS_SUPPORT ? 'mse' : 'decoder',
tabActive: 'decoder',
urls: {
realplay: 'ws://10.19.147.22:559/EUrl/q2jQie4',
talk: 'wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S',
playback: 'wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S'
},
playback: {
startTime: '2021-07-26T00:00:00',
endTime: '2021-07-26T23:59:59',
valueFormat: '',
seekStart: '2021-07-26T12:00:00',
rate: ''
},
muted: true,
volume: 50,
volumeOnSvg: {template: '<svg t="1624453273744"class="icon"viewBox="0 0 1024 1024"version="1.1"xmlns="http://www.w3.org/2000/svg"p-id="1421"width="200"height="200"><path d="M597.994667 138.005333q130.005333 28.010667 213.994667 132.992t84.010667 241.002667-84.010667 241.002667-213.994667 132.992l0-88q93.994667-28.010667 153.002667-106.005333t59.008-180.010667-59.008-180.010667-153.002667-106.005333l0-88zM704 512q0 120-106.005333 172.010667l0-344q106.005333 52.010667 106.005333 172.010667zM128 384l170.005333 0 213.994667-213.994667 0 684.010667-213.994667-213.994667-170.005333 0 0-256z"p-id="1422"></path></svg>'},
volumeOffSvg: {template: '<svg t="1624453193279"class="icon"viewBox="0 0 1024 1024"version="1.1"xmlns="http://www.w3.org/2000/svg"p-id="9147"width="200"height="200"><path d="M512 170.005333l0 180.010667-90.005333-90.005333zM181.994667 128l714.005333 714.005333-53.994667 53.994667-88-88q-74.005333 58.005333-156.010667 77.994667l0-88q50.005333-13.994667 96-50.005333l-181.994667-181.994667 0 288-213.994667-213.994667-170.005333 0 0-256 202.005333 0-202.005333-202.005333zM810.005333 512q0-101.994667-59.008-180.010667t-153.002667-106.005333l0-88q130.005333 28.010667 213.994667 132.992t84.010667 241.002667q0 96-44.010667 178.005333l-64-66.005333q21.994667-53.994667 21.994667-112zM704 512q0 18.005333-2.005333 26.005333l-104-104 0-93.994667q106.005333 52.010667 106.005333 172.010667z"p-id="9148"></path></svg>'},
recordStartState: 0,
recordStartText: '录像'
//created()
// 海康 h5 插件初始化
setTimeout(function () {_this.init()
_this.createPlayer()
_this.arrangeWindow()})
//methods 办法
// 海康视频初始化加载
init () {
// 设置播放容器的宽高并监听窗口大小变动
window.addEventListener('resize', () => {this.player.JS_Resize()
})
},
createPlayer () {
this.player = new window.JSPlugin({
szId: 'player',
szBasePath: "/js/", // 引入
iMaxSplit: 4,
iCurrentSplit: 2,
openDebug: true,
oStyle: {borderSelect: '#FFCC00',}
})
// 事件回调绑定
this.player.JS_SetWindowControlCallback({windowEventSelect: function (iWndIndex) { // 插件选中窗口回调
console.log('windowSelect callback:', iWndIndex);
},
pluginErrorHandler: function (iWndIndex, iErrorCode, oError) { // 插件谬误回调
console.log('pluginError callback:', iWndIndex, iErrorCode, oError);
},
windowEventOver: function (iWndIndex) { // 鼠标移过回调
//console.log(iWndIndex);
},
windowEventOut: function (iWndIndex) { // 鼠标移出回调
//console.log(iWndIndex);
},
windowEventUp: function (iWndIndex) { // 鼠标 mouseup 事件回调
//console.log(iWndIndex);
},
windowFullCcreenChange: function (bFull) { // 全屏切换回调
console.log('fullScreen callback:', bFull);
},
firstFrameDisplay: function (iWndIndex, iWidth, iHeight) { // 首帧显示回调
console.log('firstFrame loaded callback:', iWndIndex, iWidth, iHeight);
},
performanceLack: function () { // 性能有余回调
console.log('performanceLack callback:');
}
});
},
arrangeWindow () {
const splitNum = this.splitNum
this.player.JS_ArrangeWindow(splitNum).then(() => {console.log(`arrangeWindow to ${splitNum}x${splitNum} success`) },
e => {console.error(e) }
)
},
// 初始化完结
// 视频预览
realplay (playURL, index1) {
this.mode = 1 // 解码形式：0 一般模式 1 高级模式
const {player, mode, urls} = this,
index = player.currentWindowIndex
// playURL = this.realplay
player.JS_Play(playURL, { playURL, mode}, index1).then(() => {console.log('realplay success')
},
e => {console.error(e) }
)
},
// 敞开所有视频
stopAllPlay () {this.player.JS_StopRealPlayAll().then(() => {
this.playback.rate = 0
console.log('stopAllPlay success')
this.closeVideoTree()},
e => {console.error(e) }
)
},
// 敞开单个视频
stopPlay () {this.player.JS_Stop().then(() => {
this.playback.rate = 0
console.log('stop realplay success')
// this.closeVideoTree()
const index = this.player.currentWindowIndex
this.selectAisle(this.videoList[index], index)
},
e => {console.error(e) }
)
}
},
简略的视频预览、敞开视频就实现了，留神：如果视频播放不了，须要查看是否是高级模式预览视频，this.mode = 1 // 解码形式：0 一般模式 1 高级模式
正文完
