current position:Home>Specific usage of vue3 video play plug-in

Specific usage of vue3 video play plug-in

2021-08-27 10:30:52 xdlumia

Previous vue Video player used in the project , however UI It's not very nice , Just plan to write a video player plug-in, followed by vue3 Release ,vue3 Our ecology is not very complete , Just change the video player plug-in to vue3 edition , End use vite2+vue3 Development

plug-in unit Github Address vue-video-player

Take a look at this player first (vue3-video-play) Interface, please.


vue3-video-play The video playback plug-in is based on native HTML5 Of <video> label Development , So the supported video formats and <video> Agreement , And support <video> All native properties and methods of the tag

Home page

Function overview

  1. Support shortcut key operation
  2. Support double speed playback settings
  3. Support image setting
  4. Support light off mode setting
  5. Support picture in picture mode
  6. Support full screen playback
  7. Support full screen playback of web pages


npm install :

npm i vue3-video-play --save
 Copy code 

yarn install :

yarn add vue3-video-play --save
 Copy code 

Start using

Global use

import { createApp } from 'vue'
import App from './App.vue'
let app = createApp(App)

import vue3videoPlay from 'vue3-video-play' //  Import components 
import 'vue3-video-play/dist/style.css' //  introduce css

 Copy code 

Use in components

// require styles
import 'vue3-video-play/dist/style.css'
import { videoPlay } from 'vue-video-player'
export default {
  components: {
 Copy code 

SPA Single page usage example

    <videoPlay v-bind="options" @play="onPlay" @pause="onPause" @timeupdate="onTimeupdate" @canplay="onCanplay" />

<script setup lang="ts"> import { reactive } from 'vue'; import { videoPlay } from '../lib/index.js'; const options = reactive({ width: '800px', // Player height  height: '450px', // Player height  color: "#409eff", // Theme color  muted: false, // Mute  webFullScreen: false, speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], // Playback speed  autoPlay: false, // Auto play  loop: false, // Loop Playback  mirror: false, // Mirror image  ligthOff: false, // Light off mode  volume: 0.3, // Default volume size  control: true, // Whether to display the controller  title: '', // Video name  src: "", // Video source  poster: '', // cover  }) const onPlay = (ev) => { console.log(' Play ') } const onPause = (ev) => { console.log(ev, ' Pause ') } const onTimeupdate = (ev) => { console.log(ev, ' Time update ') } const onCanplay = (ev) => { console.log(ev, ' It can play ') } </script>

<style scoped>

 Copy code 


vue3-video-play Support video All native attributes video The default attribute Usage and props Property usage is consistent

name explain type Optional value The default value is
width Player width string - 800px
height Player height string - 450px
title Video name string - -
src Video resources string - -
color Player main tone string - #409eff
webFullScreen Web full screen boolean - false
speedRate Double speed configuration array - ["0.75", "1.0", "1.25", "1.5", "2.0"]
mirror Mirror image boolean - false
ligthOff Light off mode boolean - false
muted Mute boolean - false
autoPlay Auto play boolean - false, by true It will automatically mute when
loop Loop Playback boolean - false
volume Default volume 0.3 0-1 0.3
poster Video cover string - The first frame of the video


vue3-video-play Support video All events video Default event

Event name explain Callback
loadstart Client begins to request data event
progress The client is requesting data event
error An error was encountered while requesting data event
stalled Network stall event
play Trigger at the start of playback event
pause Trigger on pause event
loadedmetadata Get resource length successfully event
loadeddata event
waiting Waiting for data , It's not a mistake event
playing Start playback event
canplay Pause state can play event
canplaythrough Can play continuously event
timeupdate Update playback time event
ended End of play event
ratechange Playback rate change event
durationchange Resource length changes event
volumechange volume change event

The video is not based on any plug-ins , So it's smaller , js and css All that adds up to is 38kb size , This plug-in is constantly updated , If you encounter any problems, you can also github Ascending issue

plug-in unit Github Address vue-video-player You might as well point a star

See the home page for more examples



copyright notice
author[xdlumia],Please bring the original link to reprint, thank you.

Random recommended