Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/LarchLiu/vue3-video-player
vue3 version of vue-core-video-player
https://github.com/LarchLiu/vue3-video-player
video video-player vue vue3
Last synced: 3 months ago
JSON representation
vue3 version of vue-core-video-player
- Host: GitHub
- URL: https://github.com/LarchLiu/vue3-video-player
- Owner: LarchLiu
- Created: 2021-01-20T10:12:23.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2024-02-27T12:21:05.000Z (12 months ago)
- Last Synced: 2024-11-29T00:26:06.183Z (3 months ago)
- Topics: video, video-player, vue, vue3
- Language: JavaScript
- Homepage: https://larchliu.github.io/vue3-video-player/
- Size: 2.52 MB
- Stars: 98
- Watchers: 3
- Forks: 20
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue3-video-player
#### vue3 version of [vue-core-video-player](https://github.com/core-player/vue-core-video-player)
[](https://www.npmjs.com/package/@cloudgeek/vue3-video-player)
[](https://www.npmjs.com/package/@cloudgeek/vue3-video-player)
## Docs
+ [English Document](https://core-player.github.io/vue-core-video-player/)
+ [中文文档](https://core-player.github.io/vue-core-video-player/zh/)
+ [日本語](./docs/jp/README.md)
## Feature
- multiple instances in the same page
- support barrage / danmaku
- customize controls [demo](https://stackblitz.com/edit/vitejs-vite-rf6dum?file=src%2FApp.vue)
- HLS plugin [@cloudgeek/playcore-hls](https://github.com/LarchLiu/playcore-hls)
- i18n: zh-CN | pt-BR | jp | en(default)
- [example](https://github.com/LarchLiu/vue3-video-player/blob/master/src/App.vue) [demo](https://larchliu.github.io/vue3-video-player/)
## Get Started
#### Npm
``` bash
$ npm install @cloudgeek/vue3-video-player --save
```
#### Yarn
``` bash
$ yarn add @cloudgeek/vue3-video-player
```
## Basic Use
```
// main.js
import Vue3VideoPlayer from '@cloudgeek/vue3-video-player'
import '@cloudgeek/vue3-video-player/dist/vue3-video-player.css'
const app = createApp(App)
app.use(Vue3VideoPlayer, {
lang: 'zh-CN'
}).mount('#app')
```
``` vue
// your component
```
## Support barrage / danmaku
``` vue
```
## Customize Controls
Use slot name 'cusControls' like this:
```vue
```
You can use custom components like [PictureInPicture](https://stackblitz.com/edit/vitejs-vite-rf6dum?file=src%2Fcomponents%2FPictureInPicture.vue)
If you want to use video player funtion, just pass props of view-core and you will get the instance of player.
If there are multiple videos you can control player with id that defined by yourself.
``` vue
viewCore (id, player) {
console.log(id, player)
this.players[id] = player
}
```
[example](https://stackblitz.com/edit/vitejs-vite-rf6dum?file=src%2FApp.vue)
## HLS
```
import HLSCore from '@cloudgeek/playcore-hls'
```
``` vue
```
## i18n
You can use the built-in languages: 'en', 'zh-CN', 'pt-BR', 'jp'
```vue
app.use(Vue3VideoPlayer, {
lang: 'zh-CN'
}).mount('#app')
```
Or defined by yourself
```vue
const myLang = {
dashboard: {
btn: {
play: '播放',
pause: 'Pause',
fullscreen: 'Tela inteira',
exitFullscreen: 'Sair da tela inteira',
mute: 'Mute',
unmute: 'Unmute',
back: 'Back',
pip: 'ピクチャインピクチャ',
},
settings: {
autoplay: 'Autoplay',
loop: 'ループプレイ',
speed: 'Speed',
resolution: 'Resolution',
},
},
layers: {
error: {
title: 'Error!',
2404: 'Video Source Undefined',
2502: 'Media Network Error',
2503: 'Video Cannot DECODE',
2504: 'Video Cannot Play!',
601: 'Live video Cannot Play!',
},
loading: {
msg: 'Loading ...',
},
},
};
app.use(Vue3VideoPlayer, {
lang: myLang
}).mount('#app')
```
[example](https://stackblitz.com/edit/vitejs-vite-rf6dum?file=src%2Fmain.js)