The problem of vue using vue-video-player cannot play local videos and its solution

Cannot play local videos using vue-video-player

method

Because the local resources are introduced, the resources should be written in the "require" method

  sources: [
          {
            //type            type: 'video/mp4', 
            src:
              // '/456b54495743493962554345724c6657/75666c454a4d3637/6bcdb2c5d34e42a7e415eb94fd256c0776f262dd6b4a0ae236ec49141d30aee0d7d2168a1c3578a306b0aa646ced25250a8b77a59e758bf998ca67e20a951294.mp4?auth_key=1588762628-0-0-f0a1425379b81c7627fd77316fe1af10'
              require('../../assets/video/xing.mp4')
          },
             ]

Use vue-video-player to play videos and problems encountered

When writing a comment function, you need to play the video uploaded when the user comments, so I chose the vue-video-player component;

npm link:/package/vue-video-player

Install

npm install vue-video-player --save

Introduced

After installation, you can introduce components on the page you need to use. Of course, you can also introduce them globally. Please refer to npm for global introduction methods;

import '/dist/'
import 'vue-video-player/src/'
import { videoPlayer } from 'vue-video-player'

html part

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

js part

const w = window as any
const screenWidth: number = 
const screenHeight: number = 
 = {
 playsinline: true,
 autoplay: false, // If true, playback begins when the browser is ready. muted: true, // 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: screenWidth + ':' + screenHeight, // 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 a colon (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: [{
   type: 'video/mp4', // There are many types here: basic video formats, live streaming, streaming media, etc. For details, please refer to the git URL project   src: , // URL address }],
 poster:  + '?vframe/jpg/offset/1', // Your cover address.  ?The Qiniu parameters added by vframe/jpg/offset/1 are screened as the cover; controlBar: {
   timeDivider: true,
   durationDisplay: true,
   remainingTimeDisplay: false,
   fullscreenToggle: false, // Full screen button },
}

What I want to talk about is aspectRatio. I use the aspect ratio of the screen, so that even if the page does not overflow when playing the video, the progress bar under the player will not be blocked;

The above is personal experience. I hope you can give you a reference and I hope you can support me more.