效果：

安装插件及环境问题：

1、安装vue-video-player

npm install vue-video-player -save

使用中遇到的环境问题：
1、Failed to resolve loader: sass-loader You may need to install it
安装sass-loader

cnpm install sass-loader -D
cnpm install node-sass -D

如果第一步没有规定适用的版本，有可能会遇到下列错误
2、sass-loader版本过高运行错误TypeError: this.getOptions is not a function
降低sass-loader

// 卸载
npm uninstall --save sass-loade
// 安装
npm install -D sass-loader@7.x

3、 node-sass版本高

 npm uninstall node-sass
 npm install node-sass@4.14.1

2、组件使用（全部）

中间包含获取视频相关信息（自行替换），改变播放器尺寸（全铺），微信浏览器默认自动播放设置（注释）

<template>
  <div>
    <div class="downTag" @click="showApp()">
      <img
        width="150px"
        src="http://010.png"
      />
    </div>
    <div class="my_video">
      <video-player
        class="video-player vjs-custom-skin"
        ref="videoPlayer"
        :playsinline="true"
        :options="options"
        @play="onPlayerPlay($event)"
        @pause="onPlayerPause($event)"
        @ended="onPlayerEnded($event)"
        @waiting="onPlayerWaiting($event)"
        @playing="onPlayerPlaying($event)"
        @loadeddata="onPlayerLoadeddata($event)"
        @timeupdate="onPlayerTimeupdate($event)"
        @canplay="onPlayerCanplay($event)"
        @canplaythrough="onPlayerCanplaythrough($event)"
        @statechanged="playerStateChanged($event)"
        @ready="playerReadied"
      ></video-player>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { getReplyVideoInfo } from "../assets/wx";//获取视频信息
import VideoPlayer from "vue-video-player";
// require("video.js/dist/video-js.css"); //按官网引会找不到然后报错
require("vue-video-player/node_modules/video.js/dist/video-js.css");
require("vue-video-player/src/custom-theme.css");
Vue.use(VideoPlayer);
export default {
  name: "my_video",
  props: {},
  data() {
    return {
      video_id: this.$route.query.video_id || "9503",
      options: {
        playbackRates: [0.5, 1.0, 1.5, 2.0, 3.0], // 可选的播放速度
        autoplay: false, // 是否自动播放
        muted: false, // 是否静音
        loop: false, // 是否开启循环播放
        preload: "auto", // 自动预加载
        language: "zh-CN", // 语言，'en', 'zh-cn', 'zh-tw'
        aspectRatio: "207:448", // 播放器高宽占比（例如"16:9"或"4:3"）
        // fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "video/mp4", // 类型
            src: "http://8604.mp4" // url地址
          }
        ],
        poster:
          "http://ww3e325.jpgb", // 封面地址
        notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: false, // 是否显示当前时间和持续时间的分隔符，"/"
          durationDisplay: true, // 是否显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间
          fullscreenToggle: true // 是否显示全屏按钮
        }
      }
    };
  },
  created() {
    var vm = this;
    //页面初始获取高宽比，使播放器铺满窗口（视频还保持元尺寸，所以会出现黑边，这也是个问题），如果不需要铺满去电这个即可。使用fluid: true使用原视频的大小
    vm.options.aspectRatio =
      document.body.clientWidth +
      ':' +
      document.body.clientHeight;
      console.log(vm.options.aspectRatio);
    getReplyVideoInfo(vm.video_id).then(
      res => {
        vm.options.sources[0].src = res.data.url;
        vm.options.poster = res.data.poster;
      },
      err => {
        console.log(err);
      }
    );
  },
  // mounted() {
  // 处理微信浏览器里不能自动播放的操作
  //   let self = this;
  //   //调用 <audio> 元素提供的方法 play()
  //   this.$refs.videoPlayer.player.play();
  //   //判斷 WeixinJSBridge 是否存在
  //   var WeixinJSBridge = WeixinJSBridge;
  //   if (
  //     typeof WeixinJSBridge == "object" &&
  //     typeof WeixinJSBridge.invoke == "function"
  //   ) {
  //     self.$refs.videoPlayer.player.play();
  //   } else {
  //     //監聽客户端抛出事件"WeixinJSBridgeReady"
  //     if (document.addEventListener) {
  //       document.addEventListener(
  //         "WeixinJSBridgeReady",
  //         function() {
  //           self.$refs.videoPlayer.player.play();
  //         },
  //         false
  //       );
  //     } else if (document.attachEvent) {
  //       document.attachEvent("WeixinJSBridgeReady", function() {
  //         self.$refs.videoPlayer.player.play();
  //       });
  //       document.attachEvent("onWeixinJSBridgeReady", function() {
  //         self.$refs.videoPlayer.player.play();
  //       });
  //     }
  //   }
  // },
  //computed: {
  //  player() {
  //    return this.$refs.videoPlayer.player;
  //  }
  //},
  methods: {
 	//以下是组件的触发方法
    // 播放回调
    onPlayerPlay($event) {
      console.log("player play!", $event);
    },
    // 暂停回调
    onPlayerPause($event) {
      console.log("player pause!", $event);
    },
    // 视频播完回调
    onPlayerEnded($event) {
      console.log($event);
    },
    // DOM元素上的readyState更改导致播放停止
    onPlayerWaiting($event) {
      console.log($event);
    },
    // 已开始播放回调
    onPlayerPlaying($event) {
      console.log($event);
    },
    // 当播放器在当前播放位置下载数据时触发
    onPlayerLoadeddata($event) {
      console.log($event);
    },
    // 当前播放位置发生变化时触发。
    onPlayerTimeupdate($event) {
      console.log($event);
    },
    //媒体的readyState为HAVE_FUTURE_DATA或更高
    onPlayerCanplay($event) {
      console.log("player Canplay!", $event);
    },
    //媒体的readyState为HAVE_ENOUGH_DATA或更高。这意味着可以在不缓冲的情况下播放整个媒体文件。
    onPlayerCanplaythrough($event) {
      console.log("player Canplaythrough!", $event);
    },
    //播放状态改变回调
    playerStateChanged($event) {
      console.log("player current update state", $event);
    },
    //将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于，如果ready事件已经发生，它将立即触发该函数。。
    playerReadied() {
      console.log("example player 1 readied");
    },

    showApp() {
      window.location.href = "h64";
    }
  }
};
</script>

<style scoped lang="scss">
.downTag {
  position: fixed;
  left: 0;
  top: 20px;
  z-index: 2;
}
.my_video {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  text-align: center;
}
</style>

调整的地方

更新：视频全铺满！

视频全铺满video播放器：使用 **object-fit: fill;**

object-fit 属性可接受如下值：
fill -默认值。调整替换后的内容大小，以填充元素的内容框。如有必要，将拉伸或挤压物体以适应该对象。
contain - 缩放替换后的内容以保持其纵横比，同时将其放入元素的内容框。 >cover -调整替换内容的大小，以在填充元素的整个内容框时保持其长宽比。该对象将被裁剪以适应。
none - 不对替换的内容调整大小。
scale-down - 调整内容大小就像没有指定内容或包含内容一样（将导致较小的具体对象尺寸）

视频poster 全铺满修改css：**background-size: cover;**

background-size: length|percentage|cover|contain;

在原来vue-video-player设置的基础上 修改引入的css.深度作用选择器

为什么不能直接修改？ 原因：style标签添加了 scoped 属性，它的 CSS 只作用于当前组件中的元素，
自然权重是小于全局样式的，所以，样式覆盖不了

修改方式：

方法一：去掉style标签的scoped 属性

方法二：使用深度作用选择器/deep/，使用方式：将/deep/ + space空格 添加在第三方样式类的前面。

/deep/ .video-js .vjs-tech {
  object-fit: fill;
}
/deep/ .vjs-poster {
  background-size: cover;
}