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| |---|---|---|---| |callbacks|see Callback props|optional|list of video events and callback methods| |subtitles|see Subtitle props|optional|props relating to subtitles| |title|string|optional|title of the video to show when paused| |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|

Callback props

|prop|type|required|notes| |---|---|---|---| |event|string|required|name of the video event| |callback|(event?: Event) => void|required|function that's called when the event is triggered|

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-overlay-dim-colour| #000a| |--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! 😎