@kkan0615/vue-video-player v0.0.5-1

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

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

Key event

Note

The event is added at window

Types

Video

Note

Please use url not from local directory

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