如何在vue项目中引入video.js插件_vue引入video.js

借鉴了不少文章，照着来净报错，恼了自己给自己留一篇绝不报错的！

参考文章：https://www.jianshu.com/p/8b8023c7ed37

一、安装

 $ npm install video.js

二、main.js全局引入 

// 引入video.js
 
import Videojs from 'video.js'
 
import 'video.js/dist/video-js.css'
 
Vue.prototype.$video = Videojs

三、组件中的使用

结构部分：

<template>
  
    <!-- 顶部banner图 -->
    <header>
      <!-- 如果有视频，不展示banner图，显示视频框 -->
      <img :src="aggregationData.BannerImage" v-show="isBanner" alt="">
      <div v-show="isVideo">
        <video
          id="myVideo"
          class="video-js vjs-big-play-centered vjs-fluid"
          controls
          preload="auto"
          width="100%"
          height="100%"
          :poster="aggregationData.BannerImage"
        >
        <source
            type="video/mp4"
            :src="aggregationData.BannerVideo"
        >
        </video>
      </div>
    </header>
 
</template>

数据部分：

<script>
/* eslint-disable */
 
  export default {
    
    data() {
      return {
        
        isBanner:true,// 是否显示banner图
        isVideo:true,// 是否显示视频
      
      }
    },
 
    mounted() {
      this.getData()
      
      //console.log(this) //vue的原型链上有$video方法
      //console.log(this.$video)
 
    },
    methods: {
      initVideo() {   //此处初始化的调用，我放在了获取数据之后的方法内，而不是放在钩子函数mounted
        //页面dom元素渲染完毕，执行回调里面的方法
      this.$nextTick(() => {
          let myPlayer = this.$video(document.getElementById('myVideo'), {
            //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
            controls: true,
            //自动播放属性,muted:静音播放
            autoplay: false,
            //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
            preload: "auto",
            //设置视频播放器的显示宽度（以像素为单位）
            // width: "800px",
            //设置视频播放器的显示高度（以像素为单位）
            // height: "400px",
            controlBar:{
              playToggle:true
            }
          }); 
        })
        
      }
    }

注意事项：

1.videojs的初始化方法的调用，是在获取接口数据的方法内部，而非在mounted；

2.避免初始化不彻底，导致获取不到相对应的媒体资源；选择采用this.$nextTick()方法，利用其中的回调函数，使得DOM渲染刷新后再次获取video所需的相关数据，促使再次视图更新

3.this.$video和main.js中Vue.prototype.$video = Videojs 相呼应，不能写错哦！

四、默认样式的修改

参考文章：https://www.awaimai.com/2053.html

考虑到层级，在index.less中做修改，同时，采用了！important

.video-js{
  width: 120%!important;
  height: 100%!important;
}
.video-js .vjs-big-play-button {
  font-size: 3em;
  line-height: 42px!important;
  height: 50px!important;
  width: 50px!important;
  display: block;
  position: absolute!important;
  left:50%!important;
  top:50%!important;
  margin-top:-25px!important;
  margin-left:-25px!important;
  padding: 0;
  cursor: pointer;
  opacity: 1;
  border: 0.06666em solid #fff;
  background-color: #2B333F;
  background-color: rgba(43, 51, 63, 0.7);
  border-radius: 50%!important;
  -webkit-transition: all 0.4s;
  transition: all 0.4s; 
}
.vjs-paused .vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {
    display: block!important;
}
.myVideo-dimensions {
  width: 100%!important;
  height: 100%!important;
  display: block!important;
}
.vjs-poster{
  background-size: 100% 100%!important;
}

css部分可以按照自己的需要来改，我写的不够简约，应该有更巧妙的办法吧！希望你可以提出自己意见来！

五，最终呈现出的效果：

 控件部分：参考文章：https://segmentfault.com/a/1190000018914486?utm_source=tag-newest