TheWow/vue3-video-player

vue3 version of vue-core-video-player

vue3-video-player

vue3 version of vue-core-video-player

Feature

• multiple instances in the same page

• support barrage / danmaku

• HLS plugin @cloudgeek/playcore-hls

• example   demo

Get Started

Npm

$ npm install @cloudgeek/vue3-video-player --save

Yarn

$ yarn add @cloudgeek/vue3-video-player --save

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')

// your component
<template>
  <div class="player-container">
    <vue3-video-player @play="your_method" src="./videos/your_video.mp4"></vue3-video-player>
  </div>
<template>

Support barrage / danmaku

<div class="test-player-wrap">
  <vue3-video-player @global-auto-play="autoPlay" :src="source2" title="Smartisan T1"
  :barrageConfig="{fontSize: 20, opacity: 90, position: 80, barrageList: barrages2}" :view-core="viewCore">
  </vue3-video-player>
</div>

HLS

import HLSCore from '@cloudgeek/playcore-hls'

<div class="test-player-wrap">
  <vue3-video-player :core="HLSCore" :src="liveArrSource" title="test">
  </vue3-video-player>
</div>