<video-player
  ref="videoPlayer"
  class="vjs-custom-skin"
  :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>

<script>
import { videoPlayer } from 'vue-video-player';
import 'video.js/dist/video-js.css';

const playerOptions = {
  playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
  aspectRatio: '618:305', // 手动设置比例，当视频与界面比例不一致时
  autoplay: false, // 自动播放(非一定生效)
  muted: false, // 消除音频。
  loop: false, // 循环播放
  sources: [{ type: 'video/mp4', src: "" }], // 资源地址，支持多个
  poster: '', // 封面地址
  notSupportedMessage: '此视频暂无法播放，请稍后再试',
  bigPlayButton: false, // 是否展示默认播放按钮
  userActions: { click: true }, 
  controlBar: { // 控制栏
    timeDivider: true,  // 时间分隔符
    durationDisplay: true, // 显示持续时间
    remainingTimeDisplay: false, // 显示剩余时间
    fullscreenToggle: true // 全屏切换控件
  }
};

export default {
  components: { videoPlayer },
  ......
  methods: {
    onPlayerPlay(){}, // 视频播放时
    onPlayerPause(){}, // 视频暂停时
    onPlayerEnded(){}, // 视频播放结束时
    onPlayerWaiting(){}, // 视频加载等待时
    onPlayerPlaying(){}, // 开始播放时
    onPlayerLoadeddata(){}, // 当前数据加载完时
    onPlayerTimeupdate(){}, // 播放位置变化时
    onPlayerCanplay(){}, // 能播放视频时
    playerStateChanged(){}, // 视频播放状态改变时
    playerReadied(){}, // 播放器已准备时
  }
}
</script>

<div class="player-box" @click="handlePlayVideo(video)">
  <div class="tag-play-count">人观看</div>
  <video-player
    ref="videoPlayer"
    class="vjs-custom-skin"
    :playsinline="true"
    :options="video.options"
  >
  </video-player>
  <div v-if="video.showPlayTip" class="tip-box">
    浮层内容
  </div>
</div>