“This is the 15th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

Vue-video-player Applies to vue’s video.js player component.

1. Installation and introduction

Making the address

NPM address

The installation

npm install vue-video-player --save
Copy the code

Introduced the global

import VueVideoPlayer from 'vue-video-player';
import 'video.js/dist/video-js.css';
Vue.use(VueVideoPlayer);
Copy the code

Local introduction

import 'video.js/dist/video-js.css';
import { videoPlayer } from 'vue-video-player';
 
export default {
  components: {
    videoPlayer
  }
}
Copy the code

Video Player Configuration

playerOptions : {
  playbackRates: [0.7.1.0.1.5.2.0].// Playback speed
  autoplay: false.// If true, playback starts when the browser is ready.
  muted: false.// Any audio will be eliminated by default.
  loop: false.// Causes the video to restart as soon as it ends.
  preload: 'auto'.// Suggest whether the browser should start downloading video data after the 
      
  language: 'zh-CN'.aspectRatio: '16:9'.// Place the player in smooth mode and use this value when calculating the player's dynamic size. The value should represent a scale - two numbers separated by colons (for example, "16:9" or "4:3")
  fluid: true.// When true, the Video.js player will have a fluid size. In other words, it will scale to fit its container.
  sources: [{src: ' './ / path
      type: 'video/mp4'  / / type}].poster: "".// Cover address
  notSupportedMessage: 'This video cannot play now, please try again later'.// Allows overwriting the default information displayed when video.js cannot play a media source.
  controlBar: {
    timeDivider: true.// Time split line
    durationDisplay: true./ / total time
    remainingTimeDisplay: true.// Remaining playback time
    progressControl: true./ / the progress bar
    fullscreenToggle: true  // Full screen button}}Copy the code

2. Use vue-video-player in components

The complete code

<template>
  <div class="videoWrap">
    <video-player  
      class="video-player vjs-custom-skin"
      ref="videoPlayer"
      :playsinline="true"
      :options="playerOptions"
      @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>
  </div>
</template>

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

import test from '@/assets/test.mp4';
import img from '@/assets/logo.png'
export default {
  data() {
    return {
      playerOptions : {
        playbackRates: [0.7.1.0.1.5.2.0].// Playback speed
        autoplay: false.// If true, playback starts when the browser is ready.
        muted: false.// Any audio will be eliminated by default.
        loop: false.// Causes the video to restart as soon as it ends.
        preload: 'auto'.// Suggest whether the browser should start downloading video data after the 
        
        language: 'zh-CN'.aspectRatio: 'or'.// Place the player in smooth mode and use this value when calculating the player's dynamic size. The value should represent a scale - two numbers separated by colons (for example, "16:9" or "4:3")
        fluid: true.// When true, the Video.js player will have a fluid size. In other words, it will scale to fit its container.
        sources: [].poster: "".// Cover address
        notSupportedMessage: 'This video cannot play now, please try again later'.// Allows overwriting the default information displayed when video.js cannot play a media source.
        controlBar: {
          timeDivider: true.// Time split line
          durationDisplay: true./ / total time
          remainingTimeDisplay: true.// Remaining playback time
          progressControl: true./ / the progress bar
          fullscreenToggle: true  // Full screen button}}}; },computed: {
    player() {
      return this.$refs.videoPlayer.player; }},components: {
    videoPlayer
  },
  methods: {
    /* This is just a list of callback functions. If you don't need them, ignore them
    // Play the callback
    onPlayerPlay(player) {
      console.log("player play!", player);
    },
    // Pause the callback
    onPlayerPause(player) {
      console.log("player pause!", player);
    },
    // Video callback after playback
    onPlayerEnded(player) {
      console.log("player end!", player);
    },
    // readyState changes on DOM elements cause playback to stop
    onPlayerWaiting(player) {
      console.log("Player Waiting",player);
    },
    // The callback has started playing
    onPlayerPlaying(player) {
      console.log("Player Playing",player);
    },
    // Triggered when the player downloads data at the current playing position
    onPlayerLoadeddata(player) {
      console.log("Player Loadeddata",player);
    },
    // Triggered when the current playback position changes.
    onPlayerTimeupdate(player) {
      console.log("Player Timeupdate",player);
    },
    // Media readyState is HAVE_FUTURE_DATA or higher
    onPlayerCanplay(player) {
      console.log('player Canplay! ', player)
    },
    // Media readyState is HAVE_ENOUGH_DATA or higher. This means that the entire media file can be played without buffering.
    onPlayerCanplaythrough(player) {
      console.log('player Canplaythrough! ', player)
    },
    // Play the state change callback
    playerStateChanged(playerCurrentState) {
      console.log("player current update state", playerCurrentState);
    },
    // Bind the listener to the ready state of the component. The difference with event listeners is that this function is fired immediately if the ready event has already occurred.
    playerReadied(player) {
      console.log("example player 1 readied", player); }},mounted(){
    this.playerOptions.poster = img;
    const video = {
      src: test,  / / path
      type: 'video/mp4'  / / type
    };
    this.playerOptions.sources.push(video);
    console.log(test)
  }
}
</script>

<style lang="stylus" scoped>
.videoWrap{
  width: 100%;
  height: calc(100vh - 100px);
  /deep/ video{
    object-fit: fill; // Remove the black space on both sides of the player (object-fitSee the expanded section below for more information)}/* Video start button style */
  /deep/.video-js .vjs-big-play-button{
    border-width: 3px;
    border-color: rgb(255.255.255);
    border-style: solid;
    border-radius: 50%;
    width: 56px;
    height: 56px;
    line-height: 50px;
    background-color: rgba(0.0.0.0);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
  /* Scroll bar style */
  /deep/.video-js .vjs-control-bar{
    background-color: rgba(43.51.63.0);
  }
  /deep/.video-js .vjs-play-progress{
    background-color: rgb(238.191.0);
  }
  /deep/.video-js .vjs-load-progress div{
    background-color: rgb(255.255.255); }}</style>
Copy the code

Expand about object-fit properties

Definition:

The object-fit attribute specifies how the contents of an element should fit into the specified height and width of the container. Object-fit is generally used for IMG and video tags. Generally, these elements can be cut, scaled or directly stretched to retain their original proportions.

Attribute values:

value describe
fill Default value, not guaranteed to maintain the original scale, content stretching fill the entire content container. That is, the content of the element expands to the outer dimensions of the fully filled container, even if this breaks its inherent aspect ratio.
contain Keep the original size ratio. Content is scaled. That is, if you set an explicit height and width on the replacement element, this value will result in the content size, displayed completely at a fixed scale, but still within the element size.
cover Keep the original scale, but some content may be cut. That is, replace the element content size to maintain the aspect ratio, but change the width and height to completely cover the content element.
none Retain the length and width of the original element content, meaning that the content will not be reset.
scale-down Keep the original size ratio. The content is the same size as one of None or contain, depending on which of them gets the smaller object.
inherit Inherits attributes from the element’s parent.

The effect