https://github.com/hoaian2/video-player
A lightweight 30KB JavaScript video player packed with features, including source switching, picture-in-picture (PiP), and automatic landscape mode on mobile.
https://github.com/hoaian2/video-player
css javascript video-player video-player-library
Last synced: 11 months ago
JSON representation
A lightweight 30KB JavaScript video player packed with features, including source switching, picture-in-picture (PiP), and automatic landscape mode on mobile.
- Host: GitHub
- URL: https://github.com/hoaian2/video-player
- Owner: HOAIAN2
- License: mit
- Created: 2025-03-07T04:37:08.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-24T02:52:29.000Z (over 1 year ago)
- Last Synced: 2025-06-05T11:49:49.418Z (about 1 year ago)
- Topics: css, javascript, video-player, video-player-library
- Language: JavaScript
- Homepage:
- Size: 543 KB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# My Video Player
## Overview
The `createVideoPlayer` function creates a custom video player with enhanced controls such as play, pause, skip, fullscreen, progress tracking, and more. This player supports multiple video sources, speed settings, and auto-hide controls for a seamless viewing experience.
## Features
- **Play & Pause**: Toggle between playing and pausing the video.
- **Skip Forward & Backward**: Jump ahead or rewind by a specified number of seconds.
- **Fullscreen Mode**: Supports fullscreen playback with optional auto-rotation to landscape mode.
- **Volume Control**: Adjustable volume settings with mute/unmute options.
- **Progress Tracking**: Displays and updates the video progress bar.
- **Playback Speed Adjustment**: Supports custom speed settings for playback.
- **Multiple Video Sources**: Allows switching between different video sources.
- **Subtitle Support**: Easily toggle subtitles on and off.
- **Auto-Hide Controls**: The controller auto-hides after a specified period of inactivity.
- **Picture-in-Picture (PiP) Mode**: Allows the video to play in a small floating window while multitasking.
## Installation
To use the custom video player, include the JavaScript function in your project and call it with the desired configuration.
### Include Required Files
Make sure to include both the JavaScript and CSS files in your project:
```html
```
If you're using ES modules, add the `export` statement to the `createVideoPlayer` function and simply import the function:
```js
import { createVideoPlayer } from './video-player.js';
```
For TypeScript users, ensure that you have the appropriate type definitions. If needed, you can define a type for the function parameters or let TypeScript infer them based on usage. Or just tell the AI do it for you.
## Usage
```js
const player = createVideoPlayer({
// This is for switching the video source while playing. I'm not sure if it will cause errors under a slow internet connection.
sources: [
{ src: "your-video-1080.mp4", label: "1080p" },
{ src: "your-video-720.mp4", label: "720p" },
{ src: "your-video-480.mp4", label: "480p" },
],
poster: undefined,
skipSeconds: 5,
autoHideControllerAfter: 3000, // miliseconds
forceLandscape: true,
enablePIP: true,
defaultVolume: 1,
defaultTime: 0,
speedSettings: [0.5, 1, 1.5, 2],
// This is translate object, remember to fill all attributes
settingLabels: {
speed: 'Playback speed',
source: 'Quality',
caption: 'Subtitle',
off: 'Off',
},
// This is native html video caption in *.vtt format: https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video
// "srclang" is language code, not country code
captions: [
{
src: 'caption-en.vtt',
srclang: 'en',
default: true,
},
{
src: 'caption-ja.vtt',
srclang: 'ja',
default: false,
},
{
src: 'caption-vi.vtt',
srclang: 'vi',
default: false,
},
]
});
// Append to a container in the DOM
document.getElementById("video-container").appendChild(player);
```
## Configuration Options
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `sources` | Array<{src: string, label: string}> | Required | Video sources with labels. |
| `poster` | string | undefined | Video poster. |
| `skipSeconds` | Number | `5` | Number of seconds to skip forward or backward. |
| `autoHideControllerAfter` | Number | `3000` | Time (ms) before the controls auto-hide. |
| `forceLandscape` | Boolean | `true` | Auto-rotate to landscape mode in fullscreen. |
| `enablePIP` | Boolean | `true` | Show PIP button. |
| `defaultVolume` | Number | 1 | Default video volume. |
| `defaultTime` | Number | 0 | Default video current time of video. (second) |
| `speedSettings` | Array | `[0.5, 1, 1.5, 2]` | Available speed options. |
| `settingLabels` | Object | `{ source: "Source", speed: "Speed", subtitle: "Subtitles", off: "Off" }` | Custom labels for settings. |
| `captions` | Array<{src:string,srclang:string,default:boolean} | Required | Captions /subtitles in *.vtt format. |
## Controls & Shortcuts
- **Spacebar**: Play/Pause the video.
- **Arrow Right/Left**: Skip forward/backward.
- **Up/Down Arrow**: Adjust volume.
## License
This project is licensed under the MIT License.
I created this project just for fun after watching a Korean drama. You can do anything you want with this project.
## Author
Lê Hoài Ân
## Demo
