Custom Video Player

A modern looking video player feat. HTML5 Video API
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Tech Stack
2. Getting Started
   • Prerequisites
   • Installation
3. Implementation
4. Features
5. Contributing
6. License
7. Contact
8. References

🙋 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! 😄

(back to top)

🛠 Built With

• 
• 
• 

(back to top)

🚀 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!.

(back to top)

🏗️ 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:

1. 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.
2. 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.
3. 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.
4. 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

(back to top)

💎 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 for a full list of proposed features (and known issues).

(back to top)

🤝 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

(back to top)

📜 License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

📮 Contact

Prasenjit Sutradhar - @twitter_handle - prasenjitsutradhar3433@gmail.com

Project Link: https://github.com/Prasenjit-3433/Custom-Video-Player

(back to top)

✌️ References

• Fontawesome
• Pixabay.com -- Free Videos
• Heropatterns - SVG Background

(back to top)