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

Specific usage of vue3 video play plug-in

2021-08-26 21:51:21 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

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

https://xdlumia.github.io

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

install

npm install :

npm i vue3-video-play --save

yarn install :

yarn add vue3-video-play --save

Start using

Global use

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

import videoPlay from 'vue3-video-play' //  Import components 
import 'vue3-video-play/dist/style.css' //  introduce css
app.use(videoPlay)

app.mount('#app')

Use in components

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

SPA Single page usage example

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

<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: "http://vjs.zencdn.net/v/oceans.mp4", // 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>
</style>

Props

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

Events

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

https://xdlumia.github.io

Author

xdlumia

copyright notice
author[xdlumia],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210826215117752n.html

Random recommended