vue3-video-player

Vue 3 video player component with subtitle support and theme configuration.

Based on this repo.

Usage

1. Install the package:

   npm install @germingi/vue3-video-player
   

2. Import the component:

   import VideoPlayer from "@germingi/vue3-video-player";
   import "@germingi/vue3-video-player/style.css";

3. 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.
2. Change directory to the newly cloned repo.
3. Install the required packages with npm install.
4. Build the component with npm run build.
5. Deploy with npm run dev.
6. Check out the component in the browser of your choice! 😎