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

Events

vue3-video-play Support video All events video Default 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