重写样式为播放按钮圆形，控制条剩余时间调整到进度条右边

/*播放按钮设置成宽高一致，圆形，居中*/
.vjs-custom-skin > .video-js .vjs-big-play-button {
  background-color: rgba(0,0,0,0.45);
  font-size: 3.5em;
  border-radius: 50%;
  height: 2em !important;
  line-height: 2em !important;
  margin-top: -1em !important;
  margin-left: -1em !important;
  width: 2em !important;
  outline: none;
}

.video-js .vjs-big-play-button .vjs-icon-placeholder:before {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
}

/*control-bar布局时flex，通过order调整剩余时间的位置到进度条右边*/
.vjs-custom-skin > .video-js .vjs-control-bar .vjs-remaining-time{
  order:3 !important;
}

/*进度条背景轨道*/
.video-js .vjs-slider{
  border-radius: 1em;
}

/*进度条进度*/
.vjs-custom-skin > .video-js .vjs-play-progress, .vjs-custom-skin > .video-js .vjs-volume-level{
  border-radius: 1em;
}

/*鼠标进入播放器后，播放按钮颜色会变*/
.video-js:hover .vjs-big-play-button, .vjs-custom-skin>.video-js .vjs-big-play-button:active, .vjs-custom-skin>.video-js .vjs-big-play-button:focus{
  background-color: rgba(0,0,0,0.4) !important;
}

/*control bar*/
.video-js .vjs-control-bar{
  background-color: rgba(0,0,0,0.2) !important;
}

/*点击按钮时不显示蓝色边框*/
.video-js .vjs-control-bar button{
  outline: none;
}

以上写入到一个common.css文件中，然后从main.js中引入

import './assets/common.css'
import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')

Vue.use(VideoPlayer)

是用vue-video-player的文件中

<template>
  <div class="mainPage">
    <div class="mainContent" ref="mainContent">
      <video-player  class="video-player vjs-custom-skin"
        id="videoPlayer"
        ref="videoPlayer"
        webkit-playsinline="true"
        x-webkit-airplay="true"
        playsinline
        :options="playerOptions"
        :events="playerEvents"

        @canplay="onPlayerCanPlay($event)"
        @playing="onPlaying($event)"
        @pause="onPlayerPause($event)"
        @ended="onPlayerEnded($event)"
        @timeupdate="onPlayerTimeUpdated($event)"
        @statechanged="onPlayerStateChanged($event)"
        @fullscreenchange="onFullScreenChanged($event)"
        >
      </video-player>
    </div>
  </div>
</template>

<script>
import $ from "jquery"
export default {
  name: 'HelloWorld',
  data () {
    return {
      playerEvents:["fullscreenchange"],
      playerOptions : {
        // controls:false,
        // playbackRates: [0.7, 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: "",//这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
          src: "" //url地址
        }],
        poster: "../../static/images/test.jpg", //你的封面地址
        // width: document.documentElement.clientWidth, //播放器宽度
        notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: false, //不显示时间分割线‘/’，因为要把剩余时间放到进度条右边
          durationDisplay: false,
          remainingTimeDisplay: true,
          fullscreenToggle: true  //全屏按钮
        }
      }
    }
  },
}
</script>

 

路中的坑：

1.ios浏览器中播放，被自动全屏

        webkit-playsinline="true"
        x-webkit-airplay="true"
        playsinline

如上设置是为了在ios设备上可以不全屏播放，如果不设置的话，一点击播放，播放器就自动全屏了

 

2.自带样式太丑，想全部换一换，也就是playerOptions中的controls设置成false，然后自己蒙一层div，重写touch事件，拖动进度条事件，全屏按钮，播放/暂停按钮，可是全屏后样式丢失了，

因为

this.$refs.videoPlayer.player.requestFullscreen()//调用播放器的全屏

this.$refs.mainContent.requestFullscreen()//调用mainContent的全屏

mainContent全屏后依然可以操作蒙层里的元素，可是安卓可以对div全屏，ios却只能对video全屏，然后是用ios里的原生控件，不想自己控制这些乱七八糟的东西，自己写就违背了简约实用的初衷了，不同浏览器的全屏方法(requestFullscreen)可能不一样

 

3.自己计算开始时间和剩余时间的时候，开始时间和剩余时间不是同时变化的

    getShowTime:function(timeLength){
      var minute = parseInt(parseInt(timeLength) / 60)
      if(minute<10){
        minute = '0' + minute
      }
      var second = parseInt(timeLength) % 60
      if(second<10){
        second = '0' + second
      }
      return minute + ":" + second
    },

this.startedTime = this.getShowTime(player.currentTime())
//this.leftTime = this.getShowTime(player.remainingTime())
this.leftTime = this.getShowTime(parseInt(player.duration()) - parseInt(player.currentTime()))

如果时长不是整数，比如100.5，开始时间为10的时候，剩余时间为90.5，换算之后是00:10和01:30

开始时间为10.6的时候，剩余时间为89.9，换算之后是00:10和01:29，看起来不一样，十分惹眼，所以不要使用remainingTime()