在vue中使用video-player

最近有一个需求：视频播放器旁边有一个按钮控制播放暂停的，这个其实用原生的video标签也可以实现，麻烦的是在视频播放器点击暂停和播放，原生的video不能监听到这个事件，所以用了video-player
1.首先需要下载video-player插件

cnpm i vue-video-player --save

或者没有淘宝镜像的使用

npm i vue-video-player --save

2.然后在组件里引入

import { videoPlayer } from "vue-video-player";
export default {
  components: {
    videoPlayer,
  },
  }

3.然后在组件使用

<video-player
          class="video-player vjs-custom-skin"
          ref="videoPlayer"
          :playsinline="true"
          :options="playerOptions"
          @play="onPlayerPlay($event)"
          @pause="onPlayerPause($event)"
          @ended="onPlayerEnded($event)"
        ></video-player>

4.js部分，因为我的播放地址是后端传给我的，所以playerOptions先置空然后等返回后复制（赋值单个地址参数才进页面会默认有一个x不能播放，直到把后端返回的地址赋值上去，然后说用户体验不好让我改，我就把playerOptions整个置空后整个赋值）

data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      baseUrlVideo: process.env.VUE_APP_BASE_VIDEO,
      detailId: null,
      detailData: {},
      canOpen: true,
      noOpen: true,
      // 视频播放
      playerOptions: {},
    };
  },
created() {
    const detailId = this.$route.params && this.$route.params.detailId;
    this.detailId = detailId;
    this.getDetailData();
  },
  methods: {
    //获取详细的数据
    getDetailData() {
      getVideo(this.detailId).then((response) => {
        this.detailData = response.data;
        this.playerOptions = {
          playbackRates: [0.5, 1.0, 1.5, 2.0], //可选择的播放速度
          autoplay: false, //如果true,浏览器准备好时开始回放。
          muted: false, // 默认情况下将会消除任何音频。
          loop: false, // 视频一结束就重新开始。
          preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
          language: "zh-CN",
          aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
          fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
          sources: [
            {
              type: "video/mp4",
              src:
                this.baseUrlVideo +
                "/" +
                this.detailData.className +
                "/" +
                this.detailData.fileName, //url地址
            },
          ],
          poster: this.baseUrl + this.detailData.imagePath, //你的封面地址
          notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
          controlBar: {
            timeDivider: true, //当前时间和持续时间的分隔符
            durationDisplay: true, //显示持续时间
            remainingTimeDisplay: false, //是否显示剩余时间功能
            fullscreenToggle: true, //全屏按钮
          },
        };
      });
    },
    //按钮播放
    openVideo() {
      this.$refs.videoPlayer.player.play();
      this.noOpen = false;
    },
    //按钮暂停
    closeVideo() {
      this.noOpen = true;
      this.$refs.videoPlayer.player.pause(); // 暂停
    },
    // 播放回调
    onPlayerPlay($event) {
      this.noOpen = false;
    },
    // 暂停回调
    onPlayerPause($event) {
      this.noOpen = true;
    },
    // 视频播完回调
    onPlayerEnded($event) {
      this.noOpen = true;
    },
    //下载视频
    download() {
      const elink = document.createElement("a");
      elink.style.display = "none";
      elink.href =
        this.baseUrlVideo +
        "/" +
        this.detailData.className +
        "/" +
        this.detailData.fileName;
      document.body.appendChild(elink);
      elink.click();
      document.body.removeChild(elink);
    },
  },

5.最后我修改了一些css的样式

.video {
    width: 74%;
    height: 600px;
    // padding-bottom: 47%;
    background: #000000;
    position: relative;
    .video-player {
      width: 100%;
      height: 100%;
      position: absolute;
      object-fit: fill;
      ::v-deep .video-js.vjs-fluid {
        height: 100%;
        padding-top: 0;
      }
      ::v-deep .video-js {
        .vjs-poster {
          background-size: cover;//这个是让封面的背景图覆盖整个盒子
        }
        //这个是修改默认的按钮样式，一般默认在正中间，我项目需要放在左下角
        .vjs-big-play-button {
          height: 46px;
          width: 46px;
          bottom: 24px;
          left: 24px;
          top: auto;
          border: 1px solid #fff;
          border-radius: 50%;
          outline: none;
        }
        .vjs-play-control {
          outline: none;
        }
        .vjs-fullscreen-control {
          outline: none;
        }
      }
    }
  }