Insert a custom HTML5 Video Player in your website.
This project provides custom Video Player for your website. The default browser video player is dull and creating a new one is a hectic task. Through this project you can create highly customized video players in minutes.
It uses pure JAVASCRIPT for scripting and CSS3 for styling. There is zero dependency on JQUERY or anything else.
- Volume can be increased or decreased by using up ⬆️ or down ⬇️ arrow key respectively. Video must be focused first.
- Use space bar or click to Play/Pause the video. Focus the video first.
- Video Title is shown on hover.
- Go forwards or backwards by 10 seconds by using Right
▶️ or Left◀️ arrow key respectively. Focus on video is necessary. - Double click to toggle Full Screen Mode.
- Change backdrop color easily. Backdrop color is seen when the video aspect ratio is different from outer division's aspect ratio.
- Change Progress-bar's color.
- Autoplay video on load.
1. Include this CSS file inside Head section.
<link rel='stylesheet' href='player.css'>
2. Include FontAwesome from CDN.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
3. Include this script at the end of body and before calling playerSettings( ) function.
<script src="player.js"></script>
4. Add HTML wherever required.
<div class = 'player-js'
data-src = 'path-to-file.mp4'
data-title = 'Put your video title here!'
data-width = '600'
data-height = '400'>
</div>
5. Customize the default behaviour using playerSettings( ) function, if necessary. Call this function below player.js
<script>
playerSettings({
progressBar: 'orange',
backDrop: 'grey',
autoplay: 'true'
});
</script>
| Property/Element | Default Value/color |
|---|---|
| Progress bar | red |
| autoplay | false |
| Backdrop | #000 (Black) |
You can change these Default Values using playerSettings( ) function.
-
This project is in beginning stage and contains a few bugs.
-
It is not yet mobile friendly and many other features can be added too.
-
All the Contributions are appreciated.