Vue3 uses video-player to achieve video playback

1. Video-player introduction

video-player is a video player component based on , which provides rich functions, including video playback, pause, fast forward, fast rewind, full screen, volume control, etc.

The use of video-player is very simple, just install it as follows.

npm install  @videojs-player/vue --save

Then use the components in the page as follows:

<template>
  <video-player
    src="/your-path/video.mp4"
    poster="/your-path/"
    :controls="true"
    :autoplay="true"
    :loop="true"
    :volume="0.6"
    ...
    @mounted="..."
    @ready="..."
    @play="..."
    @pause="..."
    @ended="..."
    @seeking="..."
    ...
  />
</template>

<script>
  import { defineComponent } from 'vue'
  import { VideoPlayer } from '@videojs-player/vue'
  import '/dist/'

  export default defineComponent({
    components: {
      VideoPlayer
    }
  })
</script>

Among them, the src attribute is the address of the video, the post attribute is the video cover, the controls attribute indicates whether the control bar is displayed, and the autoplay attribute indicates whether it is automatically played.

video-player also provides many other properties that can be used to configure the behavior of video players. For details, please refer tovideo-player documentation。

video-player is a very powerful video player component that can meet various video playback needs. If you need to use a video player in your Vue project, consider using video-player.

Note: The latest version of components only supportsVue3

2. Use in the project

1. Installation

npm install  @videojs-player/vue --save

2. Configure global import in

// Import video playback componentimport VueVideoPlayer from '@videojs-player/vue'
import '/dist/'


const app = createApp(App)
// Video playback component(VueVideoPlayer)

3. Use components

&lt;template&gt;
&lt;main&gt;
  &lt;video-player 
      :src="videoSrc"
      :options="playerOptions"
      :volume="0.6"
  /&gt;
&lt;/main&gt;
&lt;/template&gt;

&lt;script setup&gt;
// Video link addressconst videoSrc = ref('/11.mp4');
// Video player configurationlet playerOptions = ref({
  // height: 200,
  // width: , // player width  playbackRates: [0.7, 1.0, 1.5, 2.0], // Playback speed  autoplay: 'any', // If true, playback begins when the browser is ready.  muted: true, // By default, any audio will be eliminated.  loop: true, // 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:9', // 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.  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.  controls: true,
  controlBar: {
    timeDivider: true,
    durationDisplay: true,
    remainingTimeDisplay: false,
    fullscreenToggle: true // Full screen button  }
})

&lt;/script&gt;

refer to

/surmon-china/videojs-player

This is the article about Vue3 using video-player to achieve video playback. For more related Vue3 video-player video playback content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!