The video player was used in the previous VUE project, but the UI was not very good, so I decided to write a video player plug-in immediately after the release of VUe3. The ecology of VUe3 was not complete, so I changed the video player plug-in into VUE3 version, and finally used Vite2 + VUe3 for development

Plugin Github address vue3-video-play

vue3-video-play

hls.js player component for Vue3.

HLS. Js player component for Vue3.

Take a look at the interface of the player (VuE3 – video-Play) first

Vue3 – Video-play Video playback plug-in based on nativeIt's < video >Tag development, so support video formats and<video>Consistent and supported<video>All native attributes and methods for the tag

You must use [email protected] above version

Function in

1. Supports shortcut key operations
2. Support double speed playback Settings
3. Support mirror screen Settings
4. Supports setting of off mode
5. Support picture in picture mode playback
6. Supports full screen or web page full screen playback
7. Supports playback from a fixed time
8. Support mobile terminal, mobile terminal will automatically call its own video player
9. Supports HLS video streaming and live streaming
10. HLS playback supports resolution switching

Home page example

xdlumia.github.io

Rc version V1.3.0-RC.3 🎉

• Added: Support for HLS video streaming
• New: Added picture quality switching, need video streaming support
• New: Added pictographic video switching, video streaming support
• New: The props parameter is addedcurrentTimeProperty to jump to fixed time play
• New: The props parameter is addedtypeProperty, video format

Recently updated v1.2.52 🎉

• New: right menu function, right menu includes, video filter adjustment, shortcut key description, copy the current video URL
• Feature:mirrorChange loopChange lightOffChangeThe event
• New: Added the space shortcut keyPlay/PauseThe operation of the
• Optimization: Turn off the mute button if the volume is 0 and set the volume to 5

Use guide

The installation

NPM install:

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

Yarn installation:

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

Begin to use

The global

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' / / into the CSS
app.use(vue3videoPlay)

app.mount('#app')
Copy the code

In-component use

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

Basic example

Provides rich configuration functions ::: Demo custom configuration such as custom poster.

<template> <div> <vue3VideoPlay v-bind="options" poster='https://go.dreamwq.com/videos/ironMan.jpg'/> </div> </template>  <script setup lang="ts"> import { reactive } from 'vue'; Const options = reactive({width: '800px', // player height: '450px', // player height: '150px ', // player height:' 150px ', // "'/SRC/video name:" https://go.dreamwq.com/videos/IronMan.mp4 ", / / video source muted: false, / / mute webFullScreen: false, speedRate: [" 0.75 ", "1.0", "1.25", "1.5", "2.0"], / / play times the speed of the autoPlay: false, the automatic playback loop: / / false / / loop mirror: False, // ligthOff: false, // Light off volume: 0.3, // Default volume: control: </script> <style scoped> </style>Copy the code

: : :

The progress bar can be turned on or off using the speed of props, and the currentTime property controls playback from 60 seconds

::: Demo Disables the drag function of the progress bar using speed. The currentTime property controls playback from 60 seconds

<template> <div> <vue3VideoPlay v-bind="options" poster='https://xdlumia.oss-cn-beijing.aliyuncs.com/videos/02.jpg'/> </div> </template> <script setup lang="ts"> import { reactive } from 'vue'; Const options = reactive({width: '500px', // height: '260px', // height: '260px', // "#409eff", // theme color currentTime:60, speed:false, // Close the progress bar drag title: ", // video name SRC: "Https://go.dreamwq.com/videos/IronMan.mp4", / / video source}) < / script > < style scoped > < / style >Copy the code

: : :

You can also control whether the controller is displayed by using the control property of props ::: Demo controls whether the controller is displayed by control

<template> <div> <vue3VideoPlay v-bind="options" poster='https://xdlumia.oss-cn-beijing.aliyuncs.com/videos/02.jpg'/> </div> </template> <script setup lang="ts"> import { reactive } from 'vue'; Const options = reactive({width: '500px', // player height: '260px', // player height: '260px', color: "#409eff", // control: False, // Whether to display controller title: ", // video name SRC: "Https://go.dreamwq.com/videos/IronMan.mp4", / / video source}) < / script > < style scoped > < / style >Copy the code

: : :

The event sample

::: Demo vue3-video-play Supports all events in native video.

<template> <div> <vue3VideoPlay width="800px" title=" Iron Man ": SRC ="options. SRC" :poster="options.poster" @play="onPlay" @pause="onPause" @timeupdate="onTimeupdate" @canplay="onCanplay" /> </div> </template> <script setup lang="ts"> import {  reactive } from 'vue'; Const options = reactive ({SRC: "https://go.dreamwq.com/videos/IronMan.mp4", / / video source poster: }) const onPlay = (ev) => {console.log(' play ')} const onPause = (ev) => {console.log(ev, } const onCanplay = (ev) => {console.log(ev, 'time update ')} const onCanplay = (ev) => {console.log(ev,' time update ')} </script> <style scoped> </style>Copy the code

: : :

Hls M3U8 Video/live

::: Demo vue3-video-play Supports M3U8 (HLS) playback

<template> <div> <vue3VideoPlay width="800px" title=" Ice Age ": SRC ="options. SRC" :type="options.type" :autoPlay="false" /> </div> </template> <script setup lang="ts"> import { reactive } from 'vue'; Const options = reactive ({SRC: "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8", / / video source type: 'm3u8', // video type}) </script> <style scoped>Copy the code

: : :

Props

Vue3 -video-play Video Native All Attributes video native Attributes are used in the same way as props Attributes

Events

Vue3 -video-play Supports video native all events video default events

Shortcut Keys

Supports shortcut key operations

xdlumia

Point a start

vue3-video-play