场景

若依前后端分离版手把手教你本地搭建环境并运行项目：

若依前后端分离版手把手教你本地搭建环境并运行项目_霸道流氓气质的博客-CSDN博客_前后端分离项目本地运行

在上面搭建项目的基础上，先实现了播放rtmp视频流

Vue中使用vue-video-player和videojs-flash插件实现播放rtmp视频文件流：

Vue中使用vue-video-player和videojs-flash插件实现播放rtmp视频文件流_霸道流氓气质的博客-CSDN博客_video.js-flash

如果需要在本地模拟出播放视频效果，需要播放本地的mp4文件。

注：

博客：
霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、同上面流程一样，安装vue-video-player插件

npm install vue-video-player --save

这里只安装这一个插件即可

2、页面中局部引入

import { videoPlayer } from "vue-video-player";import 'video.js/dist/video-js.css'

在components中声明

 components: { videoPlayer, },

3、页面添加播放器

4、设置播放器的相关属性

 playerOptions: { width: "800px", height: "600px", language: "zh-CN", muted: true,// 默认情况下将会消除任何音频 autoplay: true,// 如果true,浏览器准备好时开始回放。 controls: false, //不显示暂停、声音、进度条组件 loop: true, // 视频一结束就重新开始。 sources: [ { type: "video/mp4", src: "/video/video2.mp4" // url地址 }, ], },

注意这里的url对应的路径是

5、完整示例代码

       import { videoPlayer } from "vue-video-player";import 'video.js/dist/video-js.css'export default { name: "HkVideo", components: { videoPlayer, }, data() { return { videoOpen: false, playerOptions: { width: "800px", height: "600px", language: "zh-CN", muted: true,// 默认情况下将会消除任何音频 autoplay: true,// 如果true,浏览器准备好时开始回放。 controls: false, //不显示暂停、声音、进度条组件 loop: true, // 视频一结束就重新开始。 sources: [ { type: "video/mp4", src: "/video/video2.mp4" // url地址 }, ], }, }; }, destroyed() {}, methods: { //预览功能 preview() { console.log("preview"); }, //停止全部预览功能 stopAllPreview() {}, //关闭视频窗口 closeWindow() {}, // 查看摄像 videoChange() { this.videoOpen = true; //模拟摄像头预览 }, // 关闭摄像头弹窗 videoClose() { this.videoOpen = false; this.closeWindow(); }, },};.video_box { width: 100%; height: 100%;}.plugin { width: 100%; height: 100%;}.playWnd { width: 800px; height: 600px; margin: 0;}.video_box { ::v-deep .el-dialog__body { padding: 0 !important; }}