29
How I customized a video Player + bonus(fullscreen video)
Hi everyone 👋!
How are you doing?
Today I will show you how I did the JavaScript30 - Wes Bos challenge of customizing a video player.
The challenge was only to customize the controls player of the video, but Wes Bos suggested in the final minutes of the video to try to add a button for fullscreen. So I searched and found a fullscreen API to use in my project.
How are you doing?
Today I will show you how I did the JavaScript30 - Wes Bos challenge of customizing a video player.
The challenge was only to customize the controls player of the video, but Wes Bos suggested in the final minutes of the video to try to add a button for fullscreen. So I searched and found a fullscreen API to use in my project.
Let me show since the beggining
First I did the HTML
First I did the HTML

<div class="player">
<video class="player__video" src="./1003935.mp4"></video>
<div class="player__controls">
</div>
</div>
Inside the player Controls I added the tags for the player button, volume input, speed input, backwards button, forwards button and fullscreen button.
<div class="player__controls">
<!--progress Bar-->
<div class="progress">
<div class="progress__filled"></div>
</div>
<!--player Button-->
<div class="player__Button toggle" tittle="Toggle Play">►</div>
<!--volume input range-->
<input class="player__slider" type="range" name="speed" value="1" min="0.5" max="2" step="0.1">
<!--speed input range -->
<input class="player__slider" type="range" name="speed" value="1" min="0.5" max="2" step="0.1">
<!--backwards and forwards buttons-->
<button class="player__button" data-skip="-10">« 10s </button>
<button class="player__button" data-skip="20">25s » </button>
<!--fullscreen button-->
<button class="fullscreen__button">
<i class="fas fa-compress"></i>
</button>
</div>
2.Added the CSS styles ( you can check here )
3.Finally I did the JavaScript to make this video player functional
First I obtained the elements
const player = document.querySelector('.player')
const video = player.querySelector('.player__video')
const progress = player.querySelector('.progress')
const progressbar = player.querySelector('.progress__filled')
const playerButton = player.querySelector('.toggle')
const ranges = player.querySelectorAll('.player__slider')
const skipButtons = player.querySelectorAll('[data-skip]')
const fullScreenBtn = player.querySelector('.fullscreen__button')
Then I made the events and functions for each functionality of the video player:
const togglePlay = function(){
if(video.paused){
video.play()
}else{
video.pause()
}
}
video.addEventListener('click', togglePlay)
const updateButton = function(){
const icon = this.paused ? '►' : '❚❚'
playerButton.textContent = icon
}
video.addEventListener('play',updateButton)
video.addEventListener('pause',updateButton)
playerButton.addEventListener('click', togglePlay)
const skip = function(){
video.currentTime += parseFloat(this.dataset.skip)
}
skipButtons.forEach( button => button.addEventListener('click', skip)
const handleRangeUpdate = function(){
video[this.name] = this.value
}
ranges.forEach( range => range.addEventListener('change', handleRangeUpdate)
ranges.forEach( range => range.addEventListener( 'mousemove', handleRangeUpdate)
const handleProgress = function(){
const percent=(video.currentTime / video.duration)*100
progressBar.style.flexBasis = `${percent}%`
}
video.addEventListener('timeupdate', handleProgress)
the function scrub is responsable to do a math that takes the offsetX of event divided to the progress offsetWidth ,multiplying the result for video duration. then assign this result to currentTime Video.
Then add two events to progressBar , one is mousedown the other mouseup. first event when is mousedown the mousedown variable takes true mouseup the variable mousedown takes false again.
Then add two events to progressBar , one is mousedown the other mouseup. first event when is mousedown the mousedown variable takes true mouseup the variable mousedown takes false again.
const scrub = function(e){
const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration
video.currentTime = scrubTime
}
let mousedown = false
progress.addEventListener('click', scrub)
progress.addEventListenr('mousemove', (e) =>{
if(mousedown){
scrub(e)
}
})
progressBar.addEventListener('mousedown', () => mousedown = true)
progressBar.addEventListener('mouseup', () => mousedown = false)
function fullScreen(){
if(video.requestFullscreen){
video.requestFullscreen()
}
}
fullScreenBtn.addEventListener('click',fullScreen)
29