https://github.com/prasenjit-3433/custom-video-player
A modern looking video player feat. HTML5 Video API 🎞️
https://github.com/prasenjit-3433/custom-video-player
html html-audio-api html-video-api javascript webapi
Last synced: about 1 year ago
JSON representation
A modern looking video player feat. HTML5 Video API 🎞️
- Host: GitHub
- URL: https://github.com/prasenjit-3433/custom-video-player
- Owner: Prasenjit-3433
- License: mit
- Created: 2022-08-28T04:32:51.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-09-09T07:48:48.000Z (almost 4 years ago)
- Last Synced: 2025-02-15T11:29:23.883Z (over 1 year ago)
- Topics: html, html-audio-api, html-video-api, javascript, webapi
- Language: JavaScript
- Homepage: https://videoplayerinjs.netlify.app/
- Size: 56.4 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
[![Contributors][contributors-shield]][contributors-url]
[![Forks][forks-shield]][forks-url]
[![Stargazers][stars-shield]][stars-url]
[![Issues][issues-shield]][issues-url]
[![MIT License][license-shield]][license-url]
[![LinkedIn][linkedin-shield]][linkedin-url]
Custom Video Player
A modern looking video player feat. HTML5 Video API
Explore the docs »
View Demo
·
Report Bug
·
Request Feature
Table of Contents
## 🙋 About The Project
When looking for an online video player for your website, you might hear the names YouTube and Vimeo before any else. That’s because these are quick, easy, and free options readily available to you. However, if you want more control over your video assets, how they are displayed, and want to learn how users interact with your content and engage with it, you might need a private HTML5 video player.
Flash-based players have become less popular now and HTML5 video players have become the new industry standard. For facilitating seamless integration on your website, this is suggested best online video player for you! :smile:
### 🛠 Built With
* 
* 
* 
## 🚀 Getting Started
This is an example of how you may start on setting up your project locally.
To get a local copy up and running follow these simple example steps.
### Prerequisites
This is an example of how to list things you need to use the software and how to install them.
* Live Server Extension
### Installation
1. First of all install `Live Server` extension by `Ritwick Dey`.
2. Once the extension was installed, then `right-click` on `index.html` and select `Open with Live Server`.
3. It'll open a new tab in browser & start serving the video player. Enjoy!.
## 🏗️ Implementation
* First of all, we added an SVG as a hero image because an svg can scale upto any size according as the size of the viewport.
* Then added a video element with attribute `playsinline` which gonna prevent the video to be played in full screen mode by default on mobile views.
Ui Components:
-
Play Icon, Video, Mobile Responsiveness.
- Making `video` element to take `min-width: 800px` & `max-width: 80vw` and on large smart phone (600px or less), `min-width: 0` & `max-width: 90%`.
- On the click on `play-icon` or on the video, the video starts playing and `play-icon` turn into `pause-icon` & vice-versa. Also, when the current playlist is ended i.e. when `ended` event fires, `pause-icon` turn into `play-icon`.
- Also, on the click at different position on Volume Bar, it'll change current volume. To do that, extract `offsetX` & `offsetWidth` value from Volume Bar element and calculate the percentage of `offsetX` in `offsetWidth`, then update `width` of volume-bar & Change `volume-icon` accordingly.
-
Controls HTML, Show controls on hover
- By default, `control-container` has `opacity` 0 but when hover over it, it'll get opacity of 1 and added animation of style `ease-out` with delay of 2s.
-
Progress Bar - width-increment, hover-effect
- A progress-bar consists of two parts: the `progress-range` & the `progress-bar` itself. We used `calc()` CSS function to set width of `progress-range` and added some `animation` on hover as the `thikness` increases!.
- On the fire of `canPlay`, `timeupdate` events, the values of these properties `currentTime`, `duration` extracted from `video` element and calculated percentage of `currentTime` in `duration` & set it as `width` of Progress-Bar. Followed by `time-elapsed`, `total-duration` update.
- Also, on the click at different position on progress bar, it'll change current playback position. To do that, extract `offsetX` & `offsetWidth` value from Progress Bar element and calculate the percentage of `offsetX` in `offsetWidth`along `duration`, then update `width` of progress-bar, `time-elapsed`, `total-duration` etc.
-
Playback Speed Dropdown
- On change of playback speed, the `change` event fires on `select` element and then `playbackRate` property on video element is set to selected value of Playback Speed Dropdown.
_To see in action, please visit to the [Link](https://videoplayerinjs.netlify.app/)_
## 💎 Features
- [ ] Plays anything: Plays “traditional” file formats such as MP4 and WebM, but also supports adaptive streaming formats such as HLS and DASH. There’s even a special UI for live streams!
- [ ] Easy to style: Designed to be a reliable and consistent base to build on top of. The player looks great out of the box, but can be easily styled with a little bit of extra CSS.
- [ ] Supported everywhere: Your video should work everywhere your app does. The team makes an effort to support every modern browser we can, including desktop and mobile.
See the [open issues](https://github.com/Prasenjit-3433/Custom-Video-Player/issues) for a full list of proposed features (and known issues).
## 🤝 Contributing
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
Don't forget to give the project a star! Thanks again!
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## 📜 License
Distributed under the MIT License. See `LICENSE.txt` for more information.
## 📮 Contact
Prasenjit Sutradhar - [@twitter_handle](https://twitter.com/twitter_handle) - prasenjitsutradhar3433@gmail.com
Project Link: [https://github.com/Prasenjit-3433/Custom-Video-Player](https://github.com/Prasenjit-3433/Custom-Video-Player)
## ✌️ References
* [Fontawesome](https://fontawesome.com/)
* [Pixabay.com -- Free Videos](https://pixabay.com/videos/)
* [Heropatterns - SVG Background](https://heropatterns.com/)
[contributors-shield]: https://img.shields.io/github/contributors/Prasenjit-3433/Custom-Video-Player.svg?style=for-the-badge
[contributors-url]: https://github.com/Prasenjit-3433/Custom-Video-Player/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/Prasenjit-3433/Custom-Video-Player.svg?style=for-the-badge
[forks-url]: https://github.com/Prasenjit-3433/Custom-Video-Player/network/members
[stars-shield]: https://img.shields.io/github/stars/Prasenjit-3433/Custom-Video-Player.svg?style=for-the-badge
[stars-url]: https://github.com/Prasenjit-3433/Custom-Video-Player/stargazers
[issues-shield]: https://img.shields.io/github/issues/Prasenjit-3433/Custom-Video-Player.svg?style=for-the-badge
[issues-url]: https://github.com/Prasenjit-3433/Custom-Video-Player/issues
[license-shield]: https://img.shields.io/github/license/Prasenjit-3433/Custom-Video-Player.svg?style=for-the-badge
[license-url]: https://github.com/Prasenjit-3433/Custom-Video-Player/blob/main/LICENSE.txt
[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
[linkedin-url]: https://in.linkedin.com/
[product-screenshot]: images/screenshot.png
[HTML5]: https://img.shields.io/badge/HTML5-f06529?style=for-the-badge&logo=html5&logoColor=white
[HTML-url]: https://developer.mozilla.org/en-US/docs/Glossary/HTML5
[Css]: https://img.shields.io/badge/CSS3-2965f1?style=for-the-badge&logo=CSS3&logoColor=white
[Css-url]: https://developer.mozilla.org/en-US/docs/Web/CSS
[Js]: https://img.shields.io/badge/JavaScript-F0DB4F?style=for-the-badge&logo=JavaScript&logoColor=323330
[Js-url]: https://www.javascript.com/