Vue3下的视频直播流方法（RTSP和HLS流）
应用场景:大华视频直播流，有HLS和RTSP两种，需要在vue界面上播放
一、两种流的在vue下的优缺点
优点：
- HLS流实现简单，使用控件和js即可实现，完美融合前端界面，界面好不好看取决于你的美工。而且因为HLS是分片下载播放的，可以直接在控件上实现回看视频的效果开源，并且开源控件有多种选择。
- RTSP流，实时性高，清晰度更高（个人感觉，不知道是不是设置问题），流畅度也很高，并且支持H264和H265。
缺点：
-
HLS只支持H264格式，H265格式下无法播放(个人使用情况，如果你能找到可以播放的，请弹我)。而且因为HLS流是分片下载播放，需要浏览器先下载然后播放，所以延迟很高，在十秒多甚至更多。并且对浏览器和网速的要求还是比较高的，视频流畅度取决于网速。（我使用辅码流单路播放很流畅，辅码流6路播放偶尔卡顿） -
RTSP流网上的解决方案不多，
大部分都是需要插件进行播放，这就造成了对控件的要求很高，但是控件一般对网页的适配度又不高，很容易搞成错位，浮屏或者其他的样式问题，但是对于流畅度和清晰度相比来说会好一点。插件的解决方案，我暂时看到两种，一种是VLC插件，但是支持的浏览器少。另一种是大华官方的插件，不支持自定义菜单，并且插件浮于浏览器最上册，对网页版很不友好。（网上还有一种方案是将RTSP通过FFmpeg转码到HLS/FLV等流进行播放，这种就需要在服务器上搭一个转码服务，对服务器的消耗还是挺大的，所以就没有选择）
二、HLS流下的VUE播放
vue3-video-player
-
使用vue3-video-player进行播放：GitHub地址（这里只介绍npm安装方式，其他方式查看GitHub地址内其他安装方式）
-
首先npm安装依赖
npm install @cloudgeek/vue3-video-player --save -
组件或者全局引用
//...全局内引用 import Vue3VideoPlayer from '@cloudgeek/vue3-video-player' import '@cloudgeek/vue3-video-player/dist/vue3-video-player.css' //.... app.use(Vue3VideoPlayer, { lang: 'zh-CN' })引入之后就可以直接播放一些MP4等视频。
-
如果要播放HLS，需要在组件页引入HLS相关js
import HLSCore from '@cloudgeek/playcore-hls' data() { return { HLSCore, } } //然后再template内添加控件 //:src是地址，title是视频标题 <div class="test-player-wrap"> <vue3-video-player :core="HLSCore" :src="liveArrSource" title="test"> </vue3-video-player> </div>使用这个插件有一些问题：问题1.muted设为true时，有时会存在声音存在，即使chrome浏览器策略默认静音，但是但是会存在视频声音。我的解决方法是在组件加载完后再进行设置一次：
this.$nextTick(() => { var videos = document.getElementsByTagName("video") //多个组件 videos.forEach(element => { element.muted = true; element.autoplay = true; }); })问题2:更换地址后，视频播放源没有改变，需要给组件属性上添加key<vue3-video-player :core="HLSCore" :key="liveArrSource" :src="liveArrSource" title="test">
-
EasyPlayer.js
-
使用开源的EasyPlayer.js播放，这个控件支持多种流的播放，网上选择的也比较多。GitHub
-
npm安装依赖
npm install @easydarwin/easyplayer --save -
将指定文件放入指定目录(网上很多人使用的都是copy-webpack-plugin在js种进行复制，我没成功，直接手动复制)
将EasyPlayer-element.min.js和EasyPlayer.wasm放入到public文件夹下即可。
-
组件内引入并使用，具体参数可参考GitHub内
import EasyPlayer from '@easydarwin/easyplayer'; components: { EasyPlayer } //template内添加控件 <EasyPlayer :videoUrl="videoUrl" live :autoplay="autoplay" stretch></EasyPlayer>
-
三、RTSP流下的VUE播放
VLC（浏览器支持少，不介绍）
大华官网插件DHpayer
-
大华官网->下载->插件，视频WEB插件-DHPlayer V_xxxxxx程序包和文档下载。
-
下载完成后，安装DHplayer.exe，安装目录随意。
-
安装结束后，进入安装目录\demo\vue2_Version\插件+vue组件源码\目录下，将DHplayer.vue和videoPlayer.js放入项目文件夹下。（这两个文件放入同一个文件夹下）
-
组件上使用
import DHPlayer from "你放的地址/HPlayer" //export default下添加 components: { DHPlayer }, //template添加 <DHPlayer :noTip="true" num="6" class="dhplay" ref="MutilPlayer" videoId="MutilPlayer" :pathList="pathList" :shieldClass="['test_drop']"></DHPlayer>注意: num是初始化窗口数量，pathList必须是视频地址【数组】
DHPlayer的问题：
1. 浮于浏览器上层，最新版的插件和div有一点位移，可通过样式改善。 2. 不可自定菜单或者隐藏右键菜单，如果想做全屏服务，就会覆盖其他控件，就很难受，但是控件自带全屏按钮。 3. 需要每台电脑安装DHplayer.exe.(下载可能会报病毒，火绒下会报病毒，关掉杀毒软件重新下载或者安全允许就行了) 4. 如果点奥没安装插件需要提示，到videoPlayer.js里分eerror方法内进行添加。
优点：视频可拖拽，可自定义分屏，一个控件就可以播放多路视频，视频流畅度很nice。
具体功能可在 安装地址\demo\vue2_Version\下打开 start.exe查看demo，上面有代码可以参考。
如果对是视频流畅度和格式有要求，或者只支持RTSP，推荐大华插件，如果希望融合页面，支持HLS，FLV，或者其他流，推荐Vvue3-video-player和EasyPlayer.js。
