写视频流相关项目vlc能省去很多麻烦：地址如下

 Vlc media player软件商城 官方正版 免费下载 (msc93.cn)

一、video.js + hls.js

 不知是是不是我个人原因、h264可以正常播放、h265就歇了，果断换播放器

二、视频播放器-EasyPlayer

拉流方式：hls

优点：h264、h265、h265+ 及各种小牌摄像头都能播放

缺点：h264很流畅、h265稍卡、h265+ 硬解码两个视频cpu直接拉满

地址如下：

EasyPlayer.js: EasyPlayer H5版，支持http、rtmp、flv、hls等多种协议，支持全平台、全终端（Windows、Linux、Android、iOS）播放 (gitee.com)

用法比较简单，可以和video一样直接作为标签使用。

三、视频播放器-wsplayers（因为公司是和大华有合作、通过大华官网看他们播放器很流畅.于是）

拉流方式：rtsp

优点：h264、h265、h265+ 及各种小牌摄像头都能播放

缺点：不是通过大华拉的视频流不确定能否播放...

大华icc开放平台：ICC开放平台

点击链接->在线开放文档->快速入门->下载最新demo->里面的demo可以测试视频流是否能正常播放（不能的话就质问后端）

上代码——————————————————————————

层级如下：

然后在引入PlayerManager的页面 new PlayerManager创建播放器实例

<code>// vue

initializePlayer(video, index) {

const playerId = 'ws-real-player_' + index;

console.log(playerId, 'playerId')

realPlayer = new PlayerManager({

el: "ws-real-player", /** 实时预览容器id，创建多个播放器，传入不同的容器id即可 **/

type: 'real', /** real - 实时预览 record - 录像回放 **/

maxNum: 4, /** 一个播放器上限能播放的路数，可根据实际情况设置，支持 1 4 9 16 25 **/

num: 1, /** 初始化，页面显示的路数 **/

showControl: true, /** 是否显示工具栏，默认显示 **/

showIcons: { // 自定义按钮，需要的请配置true, 不需要的按钮请配置false，所有的按钮属性都要写上

streamChangeSelect: true, // 主辅码流切换

talkIcon: true, // 对讲功能按钮

localRecordIcon: true, // 录制视频功能按钮

audioIcon: true, // 开启关闭声音按钮

snapshotIcon: true, // 抓图按钮

closeIcon: true, // 关闭视频按钮

},

openIvs: true, // true-开启智能帧/规则线/目标框, false-不显示

showRecordProgressBar: true, // 录像回放时，录像的进度条是否需要

useH265MSE: true // true-表示硬解 false-软解 默认不传该字段

receiveMessageFromWSPlayer: (methods, data, err) => { /* 回调函数，可以在以下回调函数里面做监听 */

switch(methods) {

case 'initializationCompleted':

// 初始化完成，可调用播放方法（适用于动态加载解码库）

// 若回调未触发时就使用实时预览/录像回放，则无法播放。

// 此时我们可以调用一个

realPlayer.playRealVideo({

channelList: [{

id: '100000$1$0$0', // {String} 通道编码 -- 用于预览，必填

deviceCode: deviceCode, // {String} 设备编码 -- 用于对讲，对讲必填，无对讲功能可不填

deviceType: deviceType, // {String} 设备类型 -- 用于对讲，对讲必填，无对讲功能可不填

channelSeq: channelSeq, // {String|Number} 通道序号 -- 用于对讲，对讲必填，无对讲功能可不填

cameraType: cameraType, // {String|Number} 摄像头类型 -- 用于云台，云台必填，无云台功能可不填

capability: capability, // {String} 能力集 -- 用于云台，选填

}],

streamType: 1, // {Number} 码流类型 1-主码流 2-辅码流

windowIndex: 0 // {Number} 播放窗口序号（从0开始）

})

break;

case "realSuccess": // 实时预览成功

console.log("实时预览成功",)

break;

case "realError": // 实时预览失败

console.log("实时预览失败")

break;

case "talkError": // 对讲失败

console.log("对讲失败");

break;

case 'selectWindowChanged': // 选中的窗口发生改变

console.log(data, "返回窗口信息")

break;

case 'windowNumChanged': // 播放器显示的路数发生改变

console.log(data, "返回显示的窗口数量")

break;

case 'closeVideo': // 视频关闭回调

// 点击关闭按钮引发的视频关闭进行提示

// 切换视频引发的视频关闭不进行提示

if(!data.changeVideoFlag) {

console.log(`窗口${data.selectIndex}的视频已关闭`)

}

break;

case 'statusChanged': // 视频状态发生改变

break;

case 'errorInfo': // 错误信息汇总

console.log(data, "可打印查看错误消息");

}

}

})

realPlayer.realByUrl({

playType: 'url', // 写死url

rtspURL: 'rtsp地址',

wsURL: 'websocket连接',

channelId: '通道ID',

streamType: '码流类型',

// 以上必传/以下选传

selectIndex: '窗口号信息，从0开始',

playerAdapter: '窗口样式："selfAdaption" 自适应 | "stretching" 拉伸'

});

},

如果视频播放不成、各种状态码也好、功能Api也好 官网里都有写。

好用，爱用！！