It's beta version!

vue-video-player

video player made by vue component

Download

NPM

npm i @kkan0615/vue-video-player

YARN

yarn add @kkan0615/vue-video-player

How to use

Global component

import VueVideoPlayer from '@kkan0615/vue-video-player'
import '@kkan0615/vue-video-player/dist/style.css'

const app = createApp(App)

app
  .component('VueVideoPlayer', VueVideoPlayer)
  .mount('#app')

In component

<script setup lang="ts">

import VueVideoPlayer from '@kkan0615/vue-video-player'
import '@kkan0615/vue-video-player/dist/style.css'

</script>

Props

| Name | Type | Default | Description | |------------------|--------------------|----------------------------------------------|------------------------------| | videoList | video[] (array) | [] | Video list | | height | string | 600px | Video height | | width | string | 600px | Video width | | poster | string | '' | picture url before start | | loop | boolean | false | Loop the video | | initVolume | number | 100 | 0 to 100, first volume size | | initPlaybackRate | number | 1 | 0 to 2, first volume size | | videoObjectFit | object-fit (style) | 1 | object fit style | | subtitleList | Subtitle[] (array) | [] | Subtitle list | | disable | boolean | false | Disable to press any buttons | | playbackRateList | number[] (array) | [0.25, 0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0] | Playback rate list | | labelList | label[] (array) | (Check the README.md) | label(i18n) list | | subtitleClass | string | '' | subtilte class |

label list

{
  noVideo: 'No video',
  errorPlaying: 'Sorry there are some errors to play the video',
  speed: 'speed',
  subtitle: 'subtitle',
  noSubtitle: 'no subtitle',
  pictureInPicture: 'picture in picture',
  quality: 'quality',

Copy it and change the values

Slot

| Name | Description | |-----------------------|----------------------------------------------------------------| | prependInnerMenu | front of controller panel | | appendInnerMenu | back controller panel | | betweenPlayAndVolume | between play and volume button (usually for next video button) | | prependSettingContend | front of setting content list item | | appendSettingContend | back of setting content list item | | errorContainer | Error container |

Key event

| Key | Description | |------------|---------------| | space | Play or pause | | ArrowRight | move forward | | ArrowLeft | move backward | | ArrowUp | volume up | | ArrowDown | volume down |

Note

The event is added at window

Types

Video

| Key | Type | Description | Example | |---------|---------|---------------------|------------------------| | src | string | url | https://www.sample.com | | type | string | type of video | video/mp4 | | label | string | label | label | | quality | number | quality | 720px | | default | boolean | is it default video | true |

Note

Please use url not from local directory

Subtitle

| Key | Type | Description | Example | |------------|---------|------------------------|------------------------| | src | string | url | https://www.sample.com | | srclang | string | language | en | | default | boolean | is it default subtitle | true | | label | string | label | label | | kind | string | mostly use subtitle | subtitle |

Note

Please use url not from local directory

Object fit

• contain – the video will be scaled to fit the container while preserving the aspect ratio, letterboxing will be present around the video
• cover – the video is scaled to fill the container while preserving the aspect ratio, the video will be clipped
• fill – the video is scaled to fill the container without preserving the aspect ratio, the video will be stretched
• none – video is not resized

How to add more list item in setting menu

<template
  #prependSettingContend
>
  <li
      class="vue-video-player-drop-menu-content-list-item"
      @click="someFunc()"
  >
    <!--  icon part  -->
    <div
        class="vue-video-player-drop-menu-content-list-item--icon"
    >
      <m-picture-in-picture-icon
          :size="18"
      />
    </div>
    <!--  label part  -->
    <div
        class="vue-video-player-drop-menu-content-title-container--title"
    >
      some label
    </div>
  </li>
</template>

Note

Sorry, We don't support to additional list item like quality and subtitle menu. We plan to update it later!

Customizing

Styles

@import '@kkan0615/vue-video-player/dist/style.css'

Support me

What we do next?

Hide pip mode with following code

if (!('pictureInPictureEnabled' in document)) {
    pipButton.classList.add('hidden');
  }

Add loading panel