vue video player Video Player Configuration

In this article, we share the use configuration of vue-video-player video player for your reference. The specific contents are as follows

1. Installation

npm install vue-video-player -save

2. Add in main. js

import VueVideoPlayer from 'vue-video-player' //  Video player 
import 'video.js/dist/video-js.css'

Vue.use(VueVideoPlayer)

3. Create a new vueVideoPlayer. vue component for calling

<template>
 <div id="vueVideoPlayer">
 <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], //  Play speed 
  autoplay: false, //  If true, Start playback when the browser is ready. 
  muted: false, //  By default, any audio will be eliminated. 
  loop: false, //  Cause video 1 Start over when it's over. 
  preload: 'auto', //  It is recommended that browsers use the <video> Whether you should start downloading video data after loading the element. auto Browser selects best behavior , Start loading video now (if your browser supports it) 
  language: 'zh-CN',
  aspectRatio: '16:10', //  Put the player in fluent mode and use this value when calculating the dynamic size of the player. The value should represent the 1 Percentage ratio  -  Two numbers separated by colons (for example "16:9" Or "4:3" ) 
  fluid: true, //  When true When, Video.js player Will have fluid size. In other words, it will be scaled to fit its container. 
  sources: [{
   src: this.src, //  Path 
   type: 'video/mp4' //  Type 
  }],
  poster: this.cover_url, //  Your cover address 
  // width: document.documentElement.clientWidth,
  notSupportedMessage: ' This video is temporarily unplayable. Please try again later ', //  Allow overrides Video.js The default information displayed when the media source cannot be played. 
  controlBar: {
   timeDivider: true,
   durationDisplay: true,
   remainingTimeDisplay: false,
   fullscreenToggle: true //  Full screen button 
  }
  }
 }
 }
}

4. Called in other components

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

import vueVideoPlayer from './module/vueVideoPlayer'
//  Don't forget to register 
components :  {
 vueVideoPlayer 
}

For the vue. js component tutorial, please click on the topic vue. js component learning tutorial to learn.

For more vue learning tutorials, please read the special topic "vue Practical Tutorial"