https://github.com/thekiranmahajan/ansrsource-video-player
A fully responsive video player built with HTML, CSS, and JavaScript, featuring custom playback speed control, enhanced accessibility, and a range of user interface improvements. This project demonstrates the creation of a modern media player without relying on third-party libraries or frameworks, focusing on clean and maintainable code.
https://github.com/thekiranmahajan/ansrsource-video-player
css custom flexbox-css html-css-javascript html5 javascript videoplayer
Last synced: 7 months ago
JSON representation
A fully responsive video player built with HTML, CSS, and JavaScript, featuring custom playback speed control, enhanced accessibility, and a range of user interface improvements. This project demonstrates the creation of a modern media player without relying on third-party libraries or frameworks, focusing on clean and maintainable code.
- Host: GitHub
- URL: https://github.com/thekiranmahajan/ansrsource-video-player
- Owner: thekiranmahajan
- Created: 2024-06-15T07:09:48.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-06-15T17:41:58.000Z (over 1 year ago)
- Last Synced: 2025-01-27T14:52:21.151Z (8 months ago)
- Topics: css, custom, flexbox-css, html-css-javascript, html5, javascript, videoplayer
- Language: HTML
- Homepage: https://ansrsource-video-player.vercel.app
- Size: 35.1 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# JsPlay: Custom Video Player with Enhanced Features
## Overview
This project is a comprehensive video player built from scratch using HTML, CSS, and JavaScript. It includes various UI/UX features, enhanced accessibility, and keyboard navigation functionalities. The player offers custom playback speed control, smooth transitions, and several video functions like play, pause, volume adjustments, and different viewing modes, all wrapped in a fully responsive and visually pleasing UI.
## Features
### User Interface and Experience
- **Custom Icons and Google Fonts:** Incorporation of Google Fonts and Icons for a modern and clean look.
- **Smooth Transitions:** CSS transitions for a seamless and engaging user experience.
- **Responsive Design:** The player adjusts gracefully to different screen sizes, ensuring usability across devices (desktop, tablet, mobile).
- **SEO & OG Tags and Semantic Tags:** The HTML Structure leverages the HTML5 syntax and improves SEO as well as uses Semantic tags.
### Preview
### Live Demo
https://ansrsource-video-player.vercel.app
### Core Functionalities
- **Play/Pause:** Toggle play and pause with a single click or keyboard shortcut.
- **Volume Control:** Adjust volume with a slider; the icon changes to reflect the current volume level (mute, low, medium, high).
- **Playback Speed Control:** Increase or decrease playback speed using dedicated button.
- **Elapsed and Duration Time:** Display of the current playback time and the total duration.
- **Viewing Modes:** Switch between mini, theater, and full-screen modes.
### Accessibility and Navigation
- **Keyboard Shortcuts:**
- `Space`: Play/Pause
- `Arrow Left` and `J`: Rewind 5 seconds
- `Arrow Right` and `L` : Fast Forward 5 seconds
- `M`: Mute/Unmute
- `I`: Toggle Picture In Picture Mode
- `F`: Toggle Full Screen
- `T`: Toggle Theater Mode
- **ARIA Roles and Attributes:** Enhanced accessibility for screen readers and users with disabilities.
## Folder Structure
```
root
│ README.md
│ index.html
│ script.js
│ style.css
│
└───assets
└───favicon
assignment-01.mp4
```
## Setup Instructions
_P.S JavaScript and CSS is well commented :)_
1. **Clone the Repository:**
```sh
git clone https://github.com/thekiranmahajan/ansrsource-video-player
```
2. **Open the Project:**
Open `index.html` in your preferred web browser.