Day11 of #100DaysOfCode
Hii folks 🙌
Today I have completed the 11th video of JavaScript30!
Project 11: Custom HTML5 Video Player
Source: https://javascript30.com
Learnings:
The option we have is to skip the controls attribute in the <video> tag and then create our own controls that way we have a truly custom video player and meet our client’s requirements.
The steps to take to achieve that are:
- Create a container for the video tag and the controls
- Create a container with all the controls
- Add styles
- Add functionality
Steps 1–3 aren’t that difficult so Let’s take a look at step 4.
First thing we need is access to all the elements of our player.
// Get elements
const player = document.querySelector('.player');
const video = player.querySelector('.viewer');const progress = player.querySelector('.progress');
const progressBar = player.querySelector('.progress__filled');const toggle = player.querySelector('.toggle');
const skipButtons = player.querySelectorAll('[data-skip]');
const ranges = player.querySelectorAll('.player__slider');const fullScreen = player.querySelector('.fullscreen');
Next we need to implement the functionality of the following functions:
// Build functions// Play or pause the video
function togglePlay(){
}// Change the play/pause button icon according to the video state
function updateButton(){
}// Skip ahead or previous
function skip(){
}// Handle the volume and speed of video
function handleRangeUpdate(){
}// Automatically update the progress bar as the video plays
function handleProgess(){
}// Handle the scrubbing feature
function scrub(e){
}// Toggle in and out of fullscreen mode
function enterFullScreen(){
}
My implementation was a bit messy so i ended up watching the tutorial and implementing it the same way. I however did add the enterFullScreen() function on my own as it was not part of the solutions.
Here is the result of the last function:
// Toggle in and out of fullscreen mode
function enterFullScreen(){
if(!video.webkitDisplayingFullscreen){
video.webkitRequestFullScreen();
}else{
document.webkitExitFullscreen();
}
}fullScreen.addEventListener('click', enterFullScreen);
Today I Learned (T-I-L):
addEventListener()is better vs addingonclick="myFunc()"to a DOM element. This is especially true when you want to separate the structure and the logic and when you want multiple items to respond to the same function- How to create a custom html5 video player.
That is all for Day11 ✅
Thanks for reading, See you tomorrow!
