HLS播放:
HLS流直接用 video.js插件可以进行播放
大概如下：
<video v-show="false" id="videoPlayer" class="video-js vjs-default-skin" playsinline autoplay="autoplay"> <source src="https://cdn.zhixueyun.com/default/M00/05/C9/CqJGV10v5NyECg5jAAAAAKnCCyI547_t/index.m3u8" type="application/x-mpegURL" /> </video>
....import videojs from 'video.js';import 'video.js/dist/video-js.css';
...
videojs('videoPlayer', {
autoplay: false, // 设置自动播放 muted: true, // 设 preload: 'auto', // 预加载 controls: true, // 显示播放的控件
});
RTSP播放：
rtsp流需要再转码才能 播放 ，目前采用的是本地开启一个webrtc-streamer服务进行监听转码 然后再进行播放(webrtc-streamer下载地址)，如果部署到服务器上 需要把webrtc-streamer服务也开启。
-
下载解压之后开启 webrtc-streamer.exe文件
-
出现这个地址及端口说明成功开启
-
然后封装一个播放的组件 把解压的文件html->webrtcstreamer.js文件拿出来
再创建一个vue组件 如下:
<!-- * @Description: rtsp视频播放--><template> <div class="webrtcSteamer s-fill s-flex"> <video id="video" class="video-js" controls autoplay autobuffer muted preload="auto"></video> </div></template><script>import WebRtcStreamer from './webrtcstreamer.js';export default { props: { scale: { type: Number, required: true, }, videoUrl: { type: String, required: true, }, }, data() { return { httpServer: '', rtspUrl: this.videoUrl, player: null, webRtcServer: null, videoSeting: { language: 'zh-CN', autoplay: true, // true/false 播放器准备好之后，是否自动播放 【默认false】 controls: true, // /false 是否拥有控制条 【默认true】,如果设为false ,那么只能通过api进行控制了。也就是说界面上不会出现任何控制按钮 loop: false, // /false 视频播放结束后，是否循环播放 muted: true, // /false 是否静音 poster: '', // 播放前显示的视频画面，播放开始之后自动移除。通常传入一个URL preload: 'auto', // 预加载 ‘auto‘ 自动 ’metadata‘ 元数据信息 ，比如视频长度，尺寸等 ‘none‘ 不预加载任何数据，直到用户开始播放才开始下载 bigPlayButton: true, }, }; }, mounted() { var a = `${window.location.href}`; var b = a.split(':'); // webrtc-streamer 服务开启的地址 this.httpServer = `${b[0]}:${b[1]}:8000/` || `http://192.168.5.123:8000`; // 初始化webrec服务 this.webRtcServer = new WebRtcStreamer('video', this.httpServer); this.webRtcServer.connect(this.rtspUrl); }, methods: { playVideo() { this.webRtcServer.connect(this.rtspUrl); }, },};</script><style lang="scss" scoped>.webrtcSteamer { height: 100%; width: 100%; &-num { color: #06fbfc; font-weight: 500; font-family: 'PingFang SC'; }}.video-js { width: 100%; height: 100%;}</style>
结构如下：
然后引入 webrtcSteamer.vue组件进行地址传参即可播放：
<!-- videoUrl="rtsp://zephyr.rtsp.stream/pattern?streamKey=3a0e99615f5ff4b1f761360827f358c8" --> <webrtcSteamer :videoUrl="dashboardCamera.url" :scale="1" />
测试m3u8地址为：
https://cdn.zhixueyun.com/default/M00/05/C9/CqJGV10v5NyECg5jAAAAAKnCCyI547_t/index.m3u8
测试的rtsp地址可以去 相关rtsp网站 申请
效果图：
