广州站图片百度手机网页
一、海康开放平台H5视频播放器开发包下载
https://open.hikvision.com/download/5c67f1e2f05948198c909700
二、vue项目引入
1、解压h5player_2.5.1压缩包，将playctrl3文件夹、h5player.min.js文件赋值到vue项目public文件夹下，并在项目入口文件index.html中引入h5player.min.js文件。
<script src="js/h5player.min.js"></script>
三、vue页面使用
<template><div id="player" style="width: 100%;height: 100%;"></div>
</template>
<script>
export default {data () {return {player: null}},mounted () {// 例如一屏播放4个视频，写法如下this.initPlayer(2);let arr = ['ws://...', 'ws://...', 'ws://...', 'ws://...'];arr.forEach((url, index) => {this.realplay(url, index);})},methods: {// 初始化initPlayer (num = 1) { // 设置分屏：1*1、2*2、3*3、4*4this.player = new JSPlugin({szId: 'player', // 父窗口id，需要英文字母开头 必填szBasePath: "js/", // 必填,与h5player.min.js的引用路径一致iMaxSplit: 4, // 分屏播放，默认最大分屏4*4openDebug: true,mseWorkerEnable: false,//是否开启多线程解码，分辨率大于1080P建议开启，否则可能卡顿bSupporDoubleClickFull: true,//是否支持双击全屏，true-双击是全屏；false-双击无响应oStyle: {borderSelect: '#343434', // 选中视频的边框颜色，默认选择第一个，颜色为#fc0}})this.player.JS_ArrangeWindow(num).then(() => { console.log(`arrangeWindow to ${num}x${num} success`) },e => { console.error(e) })},// 预览realplay (playURL = '', index = 0) { // 设置第index（从0开始）个窗口的视频地址this.player.JS_SetTraceId(index, true);this.player.JS_Play(playURL, { playURL, mode: 0, keepDecoder: 0, token: '' }, index).then(() => {console.log('realplay success');this.player.JS_GetTraceId(index).then((id) => { console.log("traceid:", id) })},e => { console.error(e) }) },}
}
</script>
<style scoped lang="less">/* 由于我的视频没有撑满整个容器，所以加了下面的样式，如果没遇到这种情况可以忽略。*/// 设置2*2分屏时/deep/#player {& > div, & > div > div > video {width: 100% !important;height: 100% !important;}& > div > div {width: 50% !important;height: 50% !important;}}/*// 设置1*1分屏时/deep/#player {& > div,& > div > div,& > div > div > video {width: 100% !important;height: 100% !important;}}*/
</style>
注：由于我的功能比较简单，所以用到的方法不多，有更多需求可以查看压缩包里面doc文件夹下的H5player2.5.1开发指南.html文档进行学习，也可以预览demo文件夹下的demo.html文件并查看源代码进行参考。
这篇文章介绍了rtsp视频流播放方法，有需要可以看看：
https://blog.csdn.net/Dalin0929/article/details/142856685?spm=1001.2014.3001.5501