1.0.4 • Published 7 months ago
@germingi/vue3-video-player v1.0.4
vue3-video-player
Vue 3 video player component with subtitle support and theme configuration.
Based on this repo.
Usage
- Install the package:
npm install @germingi/vue3-video-player - Import the component:
import VideoPlayer from "@germingi/vue3-video-player"; import "@germingi/vue3-video-player/style.css"; - Use the component:
<VideoPlayer video-url="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" />
VideoPlayer props
| prop | type | required | notes |
|---|---|---|---|
| subtitles | see Subtitle props | optional | |
| videoHeight | number | optional | height of the video in pixels |
| videoWidth | number | optional | width of the video in pixels |
| videoUrl | string | required | url to the video |
Subtitle props
| prop | type | required | notes |
|---|---|---|---|
| enabled | boolean | required | toggles the subtitle functionality |
| deleteFunc | (subtitleId: number) => void | required | deletes the subtitle with the id |
| downloadFunc | (subtitleId: number) => void | required | downloads the subtitle with the id |
| deselectFunc | (subtitleId: number) => void | required | deselects the subtitle with the id |
| selectFunc | (subtitleId: number) => void | required | selects the subtitle with the id |
| searchFunc | (searchTerm: string, language: string) => void | required | searches for subtitles |
| subtitles | SubtitleInfo[] | required | list of subtitles to display |
| cues | SubtitleCue[] | optional | subtitle cues to render |
| defaultSearchLanguage | string | optional | the default subtitle search language (default 'en') |
| secondSearchLanguage | string | optional | the alternative subtitle search language |
Theme configuration
If you're not a fan of the default theme, you can customise it by changing these CSS variables
| name | default |
|---|---|
| --germingi-background-colour |  #000 |
| --germingi-video-control-colour |  #2d2d2d |
| --germingi-text-colour |  #eee |
| --germingi-lang-select-colour |  #904efc |
| --germingi-sub-search-colour |  #222 |
| --germingi-sub-border-colour |  #888 |
| --germingi-sub-entry-colour |  #444 |
| --germingi-sub-entry-active-colour |  #666 |
| --germingi-sub-entry-hover-colour |  #333 |
Demo
To see the component in action without installing it, you can use this repo! Here's what you need to do:
1. Clone this repo using git clone.
1. Change directory to the newly cloned repo.
1. Install the required packages with npm install.
1. Build the component with npm run build.
1. Deploy with npm run dev.
1. Check out the component in the browser of your choice! 😎