Making Video Player In HTML With Custom Controls In Javascript | letsbug
Today we are making a simple video player in HTML with the help of javascript. We have default controls in HTML while adding a video in HTML with the controls attribute. But those default controls are default and we want customization we are creating our own control box.
To make it you need to know HTML and HTML5 and javascript. We are going to implement following functions in our player.
- Play
- Pause
- Repeat
- Seek
- Mute
Custom Video Player In HTML and Javascript
For this we need three files linked with the html file which is style.css for a little styling and main.js for javascript which is going to be the backbone of this little project. So you have to create index.html, style.css, main.js in you project folder.
Then you can link that in index.html file. And open it in browser for viewing it.
code:
index.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Video Player</title><link rel="stylesheet" href="./style.css"><script src="./main.js" defer async></script></head><body><!-- video player --><div class="video-player"><video id="video"><source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"><source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">Your browser does not support the video tag.</video><div class="control-box"><button class="play_pause">Play - pause</button><button class="repeat">Repeat</button><button class="mute">Mute</button><button class="seek">Seek </button></div></div></body></html>
style.css
body {display: grid;place-items: center;}* {box-sizing: border-box;padding: 0;margin: 0;}video {width: 100%;height: 100%;}.video-player {width: 70vh;height: auto;}.control-box {display: flex;justify-content: space-between;padding: 0.3rem 1.5rem;background: hsl(199, 100%, 93%);}.control-box button {background-color: hsl(197, 100%, 33%);color: white;padding: .5rem;border: none;cursor: pointer;border-radius: .3rem;}
main.js
const video = document.querySelector('video');const play_pause = document.querySelector('.play_pause');const repeat = document.querySelector('.repeat');const mute = document.querySelector('.mute');const seek = document.querySelector('.seek');let isPlaying = falseplay_pause.addEventListener('click', () => {if (isPlaying === false) {video.play()isPlaying = true} else {video.pause()isPlaying = false}});repeat.addEventListener('click', () => {video.currentTime = 0});mute.addEventListener("click", () => {if (video.muted === false) {video.muted = true} else {video.muted = false}})seek.addEventListener('click', () => {video.currentTime += 10})
output:
 |
| output |
Comments
Post a Comment