vue中视频组建的使用

1.下载videoplayer

2.使用

<template>
         <div class="headimg">
         <video-player class="video-player vjs-custom-skin" style="cursor: pointer" 
           ref="videoPlayer" :playsinline="true" :options="playerOptions" 
           @click.native="myPlay" 
           @play="playVideo($event)" @pause="pauseVideo($event)">
         </video-player>
     </div>
</template>

3.js

<script>
   import { videoPlayer } from "vue-video-player";
   require("video.js/dist/video-js.css");
   require("vue-video-player/src/custom-theme.css");
   

   export default {
  data() {
    return {
      playerOptions: {
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto",
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            src: "", // 路径 //给路径就对了
            type: "video/mp4", // 类型
          },
        ],
        poster:
          "http://视屏默认封面的地址
        notSupportedMessage: "报错", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true, //全屏按钮
        },
      },
    };
  },
  components: {
    videoPlayer,
  },
  methods: {
    myPlay() {
      if (this.vStatus == "pause") {
        this.$refs.videoPlayer.player.play();
      } else if (this.vStatus == "play") {
        this.$refs.videoPlayer.player.pause();
      }
    },
    //播放
    playVideo(e) {
      this.vStatus = "play";
    },
    pauseVideo(e) {
      clearInterval(this.timer);
      clearInterval(this.countTimer);
      this.vStatus = "pause";
      //this.$refs.videoPlayer.player.pause();
      // console.log("暂停");
    },
    },
  },

};
</script>

4.配置好只需要后台给到对应的地址就可以完成相关的操作了。