README

vue3-video-player

vue3 version of vue-core-video-player

Feature

multiple instances in the same page
support barrage / danmaku
customize controls demo
HLS plugin @cloudgeek/playcore-hls
i18n: zh-CN | pt-BR | jp | en(default)
example demo

Get Started

Npm

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

Yarn

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

// 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>

Customize Controls

Use slot name 'cusControls' like this:

<vue3-video-player :src="source" :view-core="viewCore.bind(null, 'video1')">
  <template #cusControls>
    <picture-in-picture :player="players['video1']" />
    <span class="btn-play" @click="play('video1')">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="41"
        height="47"
        viewBox="0 0 41 47"
      >
        <path
          d="M23.5,0,47,41H0Z"
          transform="translate(41) rotate(90)"
          fill="#fff"
        />
      </svg>
    </span>
  </template>
</vue3-video-player>

You can use custom components like PictureInPicture

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.

viewCore (id, player) {
  console.log(id, player)
  this.players[id] = player
}

demo code

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>

i18n

You can use the built-in languages: 'en', 'zh-CN', 'pt-BR', 'jp'

app.use(Vue3VideoPlayer, {
  lang: 'zh-CN'
}).mount('#app')

Or define by yourself

const myLang = {
  "dashboard" : {
    "btn": {
      "play": "Play",
      "pause": "Pause",
      "fullscreen": "Full Screen",
      "exitFullscreen": "Exit Full Screen",
      "mute": "Mute",
      "unmute": "Unmute",
      "back": "Back",
      "pip": "Picture-in-Picture"
    },
    "settings" : {
      "autoplay": "Autoplay",
      "loop": "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')

Usage no npm install needed!