{"id":18333693,"url":"https://github.com/prasenjit-3433/custom-video-player","last_synced_at":"2025-04-09T18:49:09.797Z","repository":{"id":58186583,"uuid":"529762304","full_name":"Prasenjit-3433/Custom-Video-Player","owner":"Prasenjit-3433","description":"A modern looking video player feat. HTML5 Video API 🎞️","archived":false,"fork":false,"pushed_at":"2022-09-09T07:48:48.000Z","size":59156,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-15T11:29:23.883Z","etag":null,"topics":["html","html-audio-api","html-video-api","javascript","webapi"],"latest_commit_sha":null,"homepage":"https://videoplayerinjs.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Prasenjit-3433.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-08-28T04:32:51.000Z","updated_at":"2023-03-15T14:55:48.000Z","dependencies_parsed_at":"2023-01-18T02:01:02.979Z","dependency_job_id":null,"html_url":"https://github.com/Prasenjit-3433/Custom-Video-Player","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Prasenjit-3433%2FCustom-Video-Player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Prasenjit-3433%2FCustom-Video-Player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Prasenjit-3433%2FCustom-Video-Player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Prasenjit-3433%2FCustom-Video-Player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Prasenjit-3433","download_url":"https://codeload.github.com/Prasenjit-3433/Custom-Video-Player/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248091847,"owners_count":21046368,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html","html-audio-api","html-video-api","javascript","webapi"],"created_at":"2024-11-05T19:43:34.069Z","updated_at":"2025-04-09T18:49:09.773Z","avatar_url":"https://github.com/Prasenjit-3433.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- Improved compatibility of back to top link: See: https://github.com/othneildrew/Best-README-Template/pull/73 --\u003e\n\u003ca name=\"readme-top\"\u003e\u003c/a\u003e\n\u003c!--\n*** Thanks for checking out the Best-README-Template. If you have a suggestion\n*** that would make this better, please fork the repo and create a pull request\n*** or simply open an issue with the tag \"enhancement\".\n*** Don't forget to give the project a star!\n*** Thanks again! Now go create something AMAZING! :D\n--\u003e\n\n\n\n\u003c!-- PROJECT SHIELDS --\u003e\n\u003c!--\n*** I'm using markdown \"reference style\" links for readability.\n*** Reference links are enclosed in brackets [ ] instead of parentheses ( ).\n*** See the bottom of this document for the declaration of the reference variables\n*** for contributors-url, forks-url, etc. This is an optional, concise syntax you may use.\n*** https://www.markdownguide.org/basic-syntax/#reference-style-links\n--\u003e\n[![Contributors][contributors-shield]][contributors-url]\n[![Forks][forks-shield]][forks-url]\n[![Stargazers][stars-shield]][stars-url]\n[![Issues][issues-shield]][issues-url]\n[![MIT License][license-shield]][license-url]\n[![LinkedIn][linkedin-shield]][linkedin-url]\n\n\n\n\u003c!-- PROJECT LOGO --\u003e\n\u003cbr /\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/Prasenjit-3433/Custom-Video-Player\"\u003e\n    \u003cimg src=\"player.png\" alt=\"Logo\" width=\"80\" height=\"80\"\u003e\n  \u003c/a\u003e\n\n\u003ch3 align=\"center\"\u003eCustom Video Player\u003c/h3\u003e\n\n  \u003cp align=\"center\"\u003e\n    A modern looking video player feat. HTML5 Video API\n    \u003cbr /\u003e\n    \u003ca href=\"https://github.com/Prasenjit-3433/Custom-Video-Player\"\u003e\u003cstrong\u003eExplore the docs »\u003c/strong\u003e\u003c/a\u003e\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n    \u003ca href=\"https://videoplayerinjs.netlify.app/\"\u003eView Demo\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/Prasenjit-3433/Custom-Video-Player/issues\"\u003eReport Bug\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/Prasenjit-3433/Custom-Video-Player/issues\"\u003eRequest Feature\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\n\n\n\u003c!-- TABLE OF CONTENTS --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003eTable of Contents\u003c/summary\u003e\n  \u003col\u003e\n    \u003cli\u003e\n      \u003ca href=\"#-about-the-project\"\u003eAbout The Project\u003c/a\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"#-built-with\"\u003eTech Stack\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n      \u003ca href=\"#-getting-started\"\u003eGetting Started\u003c/a\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"#prerequisites\"\u003ePrerequisites\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"#installation\"\u003eInstallation\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#%EF%B8%8F-implementation\"\u003eImplementation\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#-features\"\u003eFeatures\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#-contributing\"\u003eContributing\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#-license\"\u003eLicense\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#-contact\"\u003eContact\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#%EF%B8%8F-references\"\u003eReferences\u003c/a\u003e\u003c/li\u003e\n  \u003c/ol\u003e\n\u003c/details\u003e\n\n\n\n\u003c!-- ABOUT THE PROJECT --\u003e\n## 🙋 About The Project\n\n \u003cp align=\"center\"\u003e\n  \u003cimg src=\"demo.gif\" alt=\"animated\" /\u003e\n\u003c/p\u003e\n\n\n\n\n\n\nWhen 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.\n\nFlash-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:\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n\n### 🛠 Built With\n\n* ![HTML](https://img.shields.io/badge/HTML5-f06529?style=for-the-badge\u0026logo=html5\u0026logoColor=white)\n* ![CSS](https://img.shields.io/badge/CSS3-2965f1?style=for-the-badge\u0026logo=CSS3\u0026logoColor=white)\n* ![JavaScript](https://img.shields.io/badge/JavaScript-F0DB4F?style=for-the-badge\u0026logo=JavaScript\u0026logoColor=323330)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n\n\u003c!-- GETTING STARTED --\u003e\n## 🚀 Getting Started\n\nThis is an example of how you may start on setting up your project locally.\nTo get a local copy up and running follow these simple example steps.\n\n### Prerequisites\n\nThis is an example of how to list things you need to use the software and how to install them.\n* Live Server Extension\n  ![Live-Server](Screenshot%202022-08-30%20133644.png)\n\n### Installation\n\n1. First of all install `Live Server` extension by `Ritwick Dey`.\n2. Once the extension was installed, then `right-click` on `index.html` and select `Open with Live Server`.\n3. It'll open a new tab in browser \u0026 start serving the video player. Enjoy!.\n\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n\n\u003c!-- USAGE EXAMPLES --\u003e\n## 🏗️ Implementation\n\n* 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.\n* 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.\n\u003cdetails\u003e\n\u003csummary\u003eUi Components:\u003c/summary\u003e\n\u003col\u003e\n\u003cli\u003e\n    \u003cdetails\u003e\n      \u003csummary\u003ePlay Icon, Video, Mobile Responsiveness.\u003c/summary\u003e\n      \u003cul\u003e\n        \u003cli\u003eMaking `video` element to take `min-width: 800px` \u0026 `max-width: 80vw` and on large smart phone (600px or less), `min-width: 0` \u0026 `max-width: 90%`.\u003c/li\u003e\n        \u003cli\u003eOn the click on `play-icon` or on the video, the video starts playing and `play-icon` turn into `pause-icon` \u0026 vice-versa. Also, when the current playlist is ended i.e. when `ended` event fires, `pause-icon` turn into `play-icon`.\u003c/li\u003e\n        \u003cli\u003eAlso, on the click at different position on Volume Bar, it'll change current volume. To do that, extract `offsetX` \u0026 `offsetWidth` value from Volume Bar element and calculate the percentage of `offsetX` in `offsetWidth`, then update `width` of volume-bar \u0026 Change `volume-icon` accordingly.\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/details\u003e\n  \u003c/li\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n    \u003cdetails\u003e\n      \u003csummary\u003eControls HTML, Show controls on hover\u003c/summary\u003e\n      \u003cul\u003e\n        \u003cli\u003eBy 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.\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/details\u003e\n    \u003c/li\u003e\n  \u003cli\u003e\n    \u003cdetails\u003e\n      \u003csummary\u003eProgress Bar - width-increment, hover-effect\u003c/summary\u003e\n      \u003cul\u003e\n        \u003cli\u003eA progress-bar consists of two parts: the `progress-range` \u0026 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!.\u003c/li\u003e\n        \u003cli\u003e 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` \u0026 set it as `width` of Progress-Bar. Followed by `time-elapsed`, `total-duration` update.\u003c/li\u003e\n        \u003cli\u003eAlso, on the click at different position on progress bar, it'll change current playback position. To do that, extract `offsetX` \u0026 `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.\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/details\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n  \u003cdetails\u003e\n      \u003csummary\u003ePlayback Speed Dropdown\u003c/summary\u003e\n    \u003cul\u003e\n        \u003cli\u003eOn 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.\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/details\u003e\n  \u003c/li\u003e\n\u003c/ol\u003e\n\u003c/details\u003e\n\n_To see in action, please visit to the [Link](https://videoplayerinjs.netlify.app/)_\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n\n\u003c!-- ROADMAP --\u003e\n## 💎 Features\n\n- [ ] 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!\n- [ ] 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.\n- [ ] 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.\n\nSee the [open issues](https://github.com/Prasenjit-3433/Custom-Video-Player/issues) for a full list of proposed features (and known issues).\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n\n\u003c!-- CONTRIBUTING --\u003e\n## 🤝 Contributing\n\nContributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.\n\nIf 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\".\nDon't forget to give the project a star! Thanks again!\n\n1. Fork the Project\n2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the Branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n\n\u003c!-- LICENSE --\u003e\n## 📜 License\n\nDistributed under the MIT License. See `LICENSE.txt` for more information.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n\n\u003c!-- CONTACT --\u003e\n## 📮 Contact\n\nPrasenjit Sutradhar - [@twitter_handle](https://twitter.com/twitter_handle) - prasenjitsutradhar3433@gmail.com\n\nProject Link: [https://github.com/Prasenjit-3433/Custom-Video-Player](https://github.com/Prasenjit-3433/Custom-Video-Player)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n\n\u003c!-- references --\u003e\n## ✌️ References\n\n* [Fontawesome](https://fontawesome.com/)\n* [Pixabay.com -- Free Videos](https://pixabay.com/videos/)\n* [Heropatterns - SVG Background](https://heropatterns.com/)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n\n\u003c!-- MARKDOWN LINKS \u0026 IMAGES --\u003e\n\u003c!-- https://www.markdownguide.org/basic-syntax/#reference-style-links --\u003e\n[contributors-shield]: https://img.shields.io/github/contributors/Prasenjit-3433/Custom-Video-Player.svg?style=for-the-badge\n[contributors-url]: https://github.com/Prasenjit-3433/Custom-Video-Player/graphs/contributors\n[forks-shield]: https://img.shields.io/github/forks/Prasenjit-3433/Custom-Video-Player.svg?style=for-the-badge\n[forks-url]: https://github.com/Prasenjit-3433/Custom-Video-Player/network/members\n[stars-shield]: https://img.shields.io/github/stars/Prasenjit-3433/Custom-Video-Player.svg?style=for-the-badge\n[stars-url]: https://github.com/Prasenjit-3433/Custom-Video-Player/stargazers\n[issues-shield]: https://img.shields.io/github/issues/Prasenjit-3433/Custom-Video-Player.svg?style=for-the-badge\n[issues-url]: https://github.com/Prasenjit-3433/Custom-Video-Player/issues\n[license-shield]: https://img.shields.io/github/license/Prasenjit-3433/Custom-Video-Player.svg?style=for-the-badge\n[license-url]: https://github.com/Prasenjit-3433/Custom-Video-Player/blob/main/LICENSE.txt\n[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge\u0026logo=linkedin\u0026colorB=555\n[linkedin-url]: https://in.linkedin.com/\n[product-screenshot]: images/screenshot.png\n[HTML5]: https://img.shields.io/badge/HTML5-f06529?style=for-the-badge\u0026logo=html5\u0026logoColor=white\n[HTML-url]: https://developer.mozilla.org/en-US/docs/Glossary/HTML5\n[Css]: https://img.shields.io/badge/CSS3-2965f1?style=for-the-badge\u0026logo=CSS3\u0026logoColor=white\n[Css-url]: https://developer.mozilla.org/en-US/docs/Web/CSS\n[Js]: https://img.shields.io/badge/JavaScript-F0DB4F?style=for-the-badge\u0026logo=JavaScript\u0026logoColor=323330\n[Js-url]: https://www.javascript.com/\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprasenjit-3433%2Fcustom-video-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprasenjit-3433%2Fcustom-video-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprasenjit-3433%2Fcustom-video-player/lists"}