场景

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

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

   

   

   

、页面添加播放器

    <div id="playWnd" class="playWnd">       <videoPlayer         class="vjs-custom-skin videoPlayer"         ref="videoplayer"         :playsinline="true"         width="800px"         height="600px"         :options="playerOptions"         customEventName="changed"       >       </videoPlayer>

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  
     
     
     
 、完整示例代码

<template>   <el-dialog     title="视频监控"     :visible.sync="videoOpen"     width="800px"     height="600px"     append-to-body     @close="videoClose"     class="video_box"   >     <!--视频窗口展示-->     <div id="playWnd" class="playWnd">       <videoPlayer         class="vjs-custom-skin videoPlayer"         ref="videoplayer"         :playsinline="true"         width="800px"         height="600px"         :options="playerOptions"         customEventName="changed"       >       </videoPlayer>     </div>   </el-dialog> </template> <script> 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();     },   }, }; </script> <style scoped lang="scss"> .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;   } } </style>