Detailed explanation of the usage configuration of vue-video-player video player

npm install vue-video-player -save

import VueVideoPlayer from 'vue-video-player' // Video playerimport '/dist/'

(VueVideoPlayer)

<template>
 <div >
 <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions"></video-player>
 </div>
</template>

<script>
export default {
 name: 'vueVideoPlayer',
 props: {
 src: {
  type: String
 },
 cover_url: {
  type: String
 }
 },
 data () {
 return {
 // Configuration information  playerOptions: {
  playbackRates: [0.7, 1.0, 1.5, 2.0], // Playback speed  autoplay: false, // If true, playback begins when the browser is ready.  muted: false, // By default, any audio will be eliminated.  loop: false, // causes the video to start again as soon as it ends.  preload: 'auto', // It is recommended that the browser start downloading video data after the <video> loads the element.  Auto browser selects the best behavior and start loading videos immediately (if the browser supports it)  language: 'zh-CN',
  aspectRatio: '16:10', // Put the player in smooth mode and use this value when calculating the dynamic size of the player.  The value should represent a proportion - two numbers separated by colons (e.g. "16:9" or "4:3")  fluid: true, // When true, the player will have the fluid size.  In other words, it will scale to fit its container.  sources: [{
   src: , // Path   type: 'video/mp4' // type  }],
  poster: this.cover_url, // Your cover address  // width: ,
  notSupportedMessage: 'This video cannot be played for the time being, please try again later', // Allows to overwrite the default information displayed when the media source cannot be played.  controlBar: {
   timeDivider: true,
   durationDisplay: true,
   remainingTimeDisplay: false,
   fullscreenToggle: true // Full screen button  }
  }
 }
 }
}

<vueVideoPlayer :src="" :cover_url="data.cover_url" />

import vueVideoPlayer from './module/vueVideoPlayer'
// Don't forget to registercomponents： {
 vueVideoPlayer 
}