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
Function overview
- Support shortcut key operation
- Support double speed playback settings
- Support image setting
- Support light off mode setting
- Support picture in picture mode
- Support full screen playback
- 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