video.js的使用（视频切换，时间为递增）

1. 安装

 $ npm install video.js

2. main.js中引入

 import Video from 'video.js'
 import 'video.js/dist/video-js.css'

 Vue.prototype.$video = Video

3. 使用

<video
  id="myVideo"
  class="video-js vjs-big-play-centered vjs-fluid"
  controls
  //video播放器上禁止下载
  controlsList="nodownload" 
  //禁止右键
  oncontextmenu="return(false);"
  width="100%"
  height="100%"
>
  <source
   type="video/mp4"
  >
</video>

//函数1
//在获取视频接口时  函数中使用
this.videos = this.FILE_URL + this.videoInfo[0].file_Path
document.querySelector('source').src = this.videos
//必须调用
this.initVideo();



//函数2
//切换视频时  函数中调用
var player = this.$video('myVideo');
var url = this.FILE_URL + val.file_Path        
player.src(url); 
player.play(); 



//video中必要函数  
initVideo() {
  //初始化视频方法
  let myPlayer = this.$video(myVideo, {
	  //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
	  controls: true,
	  //自动播放属性,muted:静音播放
	  autoplay: "false",
	  //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
	  preload: "auto",
	  playbackRates: [0.5,1,1.5,2,3],
  });
},

4. css样式
   你们自己看着要求引入
   #coursePlay .course_main /deep/ 这一块是文件的大容器

#coursePlay .course_main /deep/ .video-js,
  #coursePlay .course_main /deep/ .video-js .vjs-tech{
    height: 100%;
  }
    #coursePlay .course_main /deep/ .vjs-big-play-button {
  font-size: 5em;
  line-height: 80px!important;
  height: 86px!important;
  width: 86px!important;
  position: absolute!important;
  left:50%!important;
  top:50%!important;
  transform: translate(-50%,-50%);
  margin-top:-25px!important;
  margin-left:-25px!important;
  padding: 0;
  cursor: pointer;
  opacity: 1;
  border: 6px 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; 
}
#coursePlay .course_main /deep/.vjs-paused .vjs-big-play-button{
  display: block;
}
#coursePlay .course_main /deep/ .vjs-poster{
  background-size: 100% 100%!important;
  
}
#coursePlay .course_main /deep/ .video-js .vjs-time-control{
    display: none;
  }
  #coursePlay .course_main /deep/ .video-js .vjs-duration, 
  #coursePlay .course_main /deep/.vjs-no-flex .vjs-duration,
  #coursePlay .course_main /deep/.vjs-time-divider,
  #coursePlay .course_main /deep/.video-js .vjs-current-time, 
  #coursePlay .course_main /deep/.vjs-no-flex .vjs-current-time{
    display: block !important;
  }

按需求引入：
上述函数中 FILE_URL 为自定义参数，视频地址前面固定地址

  import { CONFIG } from '../../utils/common.js'

  computed: {
    FILE_URL:function(){ 
      return CONFIG.FILE_URL;
    },
  },

common.js文件

export const CONFIG = {
    FILE_URL: process.env.VUE_APP_FILE_URL
}

开发文档：.env.development

# just a flag
ENV = 'development'

# base api
VUE_APP_BASE_API = '/api/'
VUE_APP_FILE_URL='http://192.168.0.224:8080/file'