https://github.com/saqibbedar/custom-video-player

custom video player
https://github.com/saqibbedar/custom-video-player

css3 custom-video-player custom-video-player-with-js hmtl5 javascript video-player

Last synced: 4 days ago
JSON representation

custom video player

• Host: GitHub
• URL: https://github.com/saqibbedar/custom-video-player
• Owner: saqibbedar
• Created: 2024-03-03T16:41:44.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-03-03T18:45:32.000Z (10 months ago)
• Last Synced: 2024-03-03T19:36:12.105Z (10 months ago)
• Topics: css3, custom-video-player, custom-video-player-with-js, hmtl5, javascript, video-player
• Language: JavaScript
• Homepage: https://saqibbedar.github.io/custom-video-player/
• Size: 13.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Custom Video Player

This project is a custom video player built with HTML, CSS, and JavaScript. It features a sleek and user-friendly interface with controls for play/pause, volume, video progress, playback speed, picture-in-picture, and full-screen view. For more, check out live demo [here](https://saqibbedar.github.io/custom-video-player/).

## Getting Started

To get started with this project, simply clone this repository:

```md 

git clone https://github.com/saqibbedar/custom-video-player

```

2. Navigate to the project directory.

3. Open the `index.html` file in your browser to view the video player.

## Usage

To use the video player, simply load a video file into the `` tag in the `index.html` file. The controls for the video player are intuitive and easy to use. 

- The main play/pause button is used to play or pause the video.

- The video progress bar shows the current progress of the video and can be used to skip to different parts of the video.

- The volume button and slider control the volume of the video.

- The playback speed button allows you to adjust the speed of the video playback.

- The picture-in-picture button allows you to watch the video in a floating window while interacting with other applications.

- The full-screen button allows you to view the video in full-screen mode.

## Support Me

I am computer science student and I do share these types of projects here on github account for free. All of code on my github is free under `MIT License`. It takes me a great time to build all of these projects so I am sure you would support me for the efforts I am putting. Thanks in advance for your support.



## Contributing 😍

Contributions are welcome! Please feel free to submit a pull request. This projects really needs some additional features, I have not added much more due to the short time but in future I will add more, till then you can also help me to make this little project much more better.

## License

This project is licensed under the MIT License.

Happy Coding 🚀