Vue中使用vue-video-player插件播放本地mp4视频文件

场景

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

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