vue 项目中使用hik h5player 下载海康h5player安装包 public 文件夹下新建hik_video文件夹，将安装包中的bin文件夹复制到hik_video文件夹下 public 文件夹下index.html。添加如下代码 <script type="text/javascript" src="<%= BASE_URL %>hik_video/h5player.min.js"></script> src\assets 文件夹下新建hik_video文件夹，将安装包中的bin文件夹复制到hik_video文件夹下 src\components 文件夹下新建HikH5Player文件夹，创建index.vue文件 <template> <div id="player" style="width: 800px;height: 600px;"></div> </template> <script> import '@/assets/hik_video/h5player.min.js' import {getPreviewUrl, getPlaybackUrl} from '@/api/data/camera' export default { name: 'hik-h5player', data(){ return { //播放器对象 player: null, splitNum: 1, mode: 1, } }, mounted() { this.createPlayer() this.init() }, methods: { init() { // 设置播放容器的宽高并监听窗口大小变化 window.addEventListener('resize', () => { this.player.JS_Resize() }) }, /** * 初始化播放器 */ createPlayer() { this.player = new window.JSPlugin({ // 需要英文字母开头 必填 szId: 'player', // 必填,引用H5player.min.js的js相对路径 szBasePath: './hik_video', // 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高 iWidth: 600, iHeight: 400, // 分屏播放，默认最大分屏4*4 iMaxSplit: 16, iCurrentSplit: this.splitNum, // 样式 oStyle: { border: '#343434', borderSelect: '#FFCC00', background: '#000' } }) // 事件回调绑定 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(splitNum) { this.splitNum = splitNum this.player.JS_ArrangeWindow(splitNum).then( () => { console.log(`arrangeWindow to ${splitNum}x${splitNum} success`) }, e => { console.error(e) } ) }, /** * 全屏 */ wholeFullScreen() { this.player.JS_FullScreenDisplay(true).then( () => { console.log(`wholeFullScreen success`) }, e => { console.error(e) } ) }, /** * 获取取流链接 * @returns {*} */ realplay(code,transmode,index) { let {player, mode} = this if(index === null || index === undefined){ index = player.currentWindowIndex } if(transmode === null || transmode === undefined){ transmode = 1 } const param = { 'cameraIndexCode': code, 'transmode': transmode } getPreviewUrl(param).then(response => { let playURL =response.data.url this.player.JS_Play(playURL, {playURL, mode}, index).then( () => { console.log('realplay success') }, e => { console.error(e) } ) }); }, stopPlay() { this.player.JS_Stop(this.player.currentWindowIndex).then( () => { console.log('stop realplay success') }, e => { console.error(e) } ) }, stopAllPlay() { this.player.JS_StopRealPlayAll().then( () => { console.log('stopAllPlay success') }, e => { console.error(e) } ) }, /** * 获取回放链接 2021-06-29T00:00:00Z * @returns {AxiosPromise} */ playback(code,transmode,startTime,endTime) { startTime += '+08:00' endTime += '+08:00' let { player, mode } = this, index = player.currentWindowIndex //todo const param = { "cameraIndexCode": code, "startTime": startTime, "endTime": endTime, 'protocol': 'ws', "transmode": transmode } getPlaybackUrl(param).then(response => { let playURL =response.data.url this.player.JS_Play(playURL, { playURL, mode }, index, startTime, endTime).then( () => { console.log('playbackStart success') }, e => { console.error(e) } ) }); }, playbackPause() { this.player.JS_Pause(this.player.currentWindowIndex).then( () => { console.log('playbackPause success') }, e => { console.error(e) } ) }, playbackResume() { this.player.JS_Resume(this.player.currentWindowIndex).then( () => { console.log('playbackResume success') }, e => { console.error(e) } ) }, playbackSlow(){ this.player.JS_Slow(this.player.currentWindowIndex).then( rate => { console.log('playbackSlow success. rate=' + rate) }, e => { console.error(e) } ) }, playbackFast(){ this.player.JS_Fast(this.player.currentWindowIndex).then( rate => { console.log('playbackFast success. rate=' + rate) }, e => { console.error(e) } ) } } } </script> //获取摄像机预览地址 export function getPreviewUrl(data){ return request({ url: '/data/camera/getPreviewUrl', method: 'post', data: data }) } //获取摄像机录像地址 export function getPlaybackUrl(data){ return request({ url: '/data/camera/getPlaybackUrl', method: 'post', data: data }) } 使用海康openapi获取摄像机的ws视频流地址 记录问题 海康h5player插件，需要海康服务器特定版本的流媒体网关，否则无法使用。 不支持大华摄像机，会报错 jsdecoder1.0 unsupport dahua video
...