How to create a Video Player using JavaScript | Create Video Player in JavaScript

hey there everyone this is ram here and today we are going to create this video player um this video player has all the essential elements uh which are required which should have within a video player so let me show you that it is responsive also and let me show you that it has a play button we can pause it it has a functionality of pausing then the volume like the volume icon is also responding at the same time when we are increasing or decreasing this uh span on this um time span is also working like if i click here it's back and here is the time this is the total time duration of this uh video and it has the time time lapse like time sequence sorry time sequence that where we can use the we can increase the time uh like let me bring it actually the video is too short so if and the video is here let me play this and you can see it is fast now and five right here and it is too slow okay it it has all the elements which a video player should have and it is um it has the ability of full screen so you can see that it has the ability of full screen yeah why i was talking now i noticed that when i was talking the sound was too much so let me tell you that what i was saying here that it has the the playback rate or the playback ratio of the video can work according to these numbers or according to this time limits so this is what we are going to create and this button also you can see that when there is a now you cannot hear anything there isn't any kind of sound now here is a little bit more and now it's cool so you guys can see that the icon is also working and the speed is 0.5 so it's very slow it's working according to 0.5 and if i make it to this one so you can see that it is too fast and the span is growing um rapidly okay just growing fastly quickly so now let me show you this uh the responsiveness of this project so here you guys can see that it is responsive and you can see all these uh icons are looking good uh on this responsive okay on the responsive screen and they are looking fine everything is um everything is looking good and the project is the technology i've used in this project are html five css and javascript so i hope that you guys will learn something new uh while creating this project uh something new of javascript right so let's start working with this one here is my code editor vs code and um i already have a folder so video player tutorial and i'm going to create a file index.html then i would like to create another file within that folder mean dot css and another file that would be me dot js okay so within this index.html i'm gonna use the the template starter template of html so here i would like to say video player tutorial and um i would like to link the css so link it to my css so here is sidesheet and intro for the main dot css then in the body let's uh use the javascript and the javascript is gonna be main dot not css sorry main dot js so now we let me tell you that what we would like to have for this play button this um speaker icon this full screen button i didn't show you that it is working on full screen so you guys can see that when i click on it it has it now it is on full screen so when i click on it it goes to normal position so all for all these icons we need one awesome icon and you know you guys know about my trick using font awesome icon i have my code go to the site and get the code and i'm gonna add it here in the header section head section of this html okay so here we have this um fun awesome icon uh link so uh let's start working with the within the body section so we would like to go with the div assigning a class the class is gonna be player then let's have another element this element is gonna be video and here i would like to go with source and the source i'm gonna use here is let me go here and i'm going to uh i will add the source link in the description below you guys can get it and get get this one i'm getting this video from pixels.com sorry pexels.com and they are like you guys can use them give credit to the creators and you can you guys can use them so it has many videos but mostly the videos um the pixels the videos which pixels have those videos are without sound i got it with sound so this is the video i have used okay this is the one i've used okay fine no problem i'll give the link in the description below okay and then go to this link go to the free download button uh right click on it and get the copy the link address okay just copy the link address go there and paste it here okay so here is the link address we have to wrap it into codes okay and then after within this let's assign it to class and this task is gonna be video and then we need to say please in line okay and that's all fine then after what we have to do we have to create a div this day we will have a class and the class is going to be controls the controls we are going to use the volume control play button all these things here okay so let's see let's have another day when this day should have a class of controls container then what we have to do we need that span this time not here sorry here this video span the progress span so what we can do for this one we just have um div assignment a class this class is gonna be progress span and our title the title is gonna be seek let me show you okay so here when i you can see that it has a seek title and if i click here then it is jumping or bringing a tradition so we are seeking within the video okay and then after the seek what we do need we need another live plus signing in a class this class is gonna be progress bar okay after this let's go to have an other situation so [Music] this then should have a class of group control group control hold on control group okay and we are going to create the controls controls mean the these controls and this one so on both sides left and right side so what i'm gonna do first is to create the left controls that's how we do is signing in a class and this class is gonna be left controls and within this left control let's have a div i'm signing it at class this class is gonna have a play options okay and we would like to go with the font awesome icon so if it is f a play title this title is gonna be play and [Music] you know what let me use the capital letters okay after playing let's have an id and this id we are going to use this id in our javascript play button okay fine then we would like to go with the volume so let's have a div here signing in a class and this class is going to be volume then we have another div assigning it a class and this class is going to be volume icon and again for an awesome icon class so this is gonna be fasfa volume up and let's have a title this title is going to be mute and um let's have an id the id is gonna be volume icon okay we are going to use this in javascript then after this let's have another dip signing in a class and this class is gonna be volume [Music] yeah volume line i'm talking about this line okay so it's gonna be volume nine and um let's have a title title is gonna be change change volume after this let's have a another dip instead it's gonna have a class of volume bar so volume bar okay save it let's move on to the browser and let's see what what we have done so far okay okay we didn't get the video there should be a video but okay fine here is the problem okay i it was a typo and and then let it search and look for it okay let it do that and yeah after this volume bar okay so it searched and here is our video plus the play button and the speaker or the volume button so let's go back our volume i'm sorry so now what we do have to do next is right controls okay we have done with the left controls so now we would like to do with the right controls and you know it shouldn't be here my apologies it should be here okay now let's start another div assigning in a class this class is gonna be right controls okay then we should have another div and this div have a class of speed then let's have a title here and this title is gonna be play back rate or playback speed okay so playback rate then let's have some options here so first of all let's go with the select um element and it should have a name the name is gonna be play back rate and the class is gonna be player speed let's have a option here and value the value is gonna be 0.5 and let's say 0.5 and x for times so let me copy and paste it for several times okay so this one and this one um by pressing the alt key from my keyboard i've selected these two options so here it's going to be 75.75 and the next one is going to be here it should be 1 and this is gonna be 1.0 then this one and this one but it shouldn't be here uh it should be 1.5 okay and this one is gonna be 2 and here is going to be 2.0 okay so save it then after this let's have a let me show you what is this okay so this is the playback rate okay you guys can see 0.5 7.75 one one point zero one point five and two point zero and now we need this one okay this uh um this full screen option and this time um this time lapse okay this time lapse so for this what we have to do let's have another dip assigning in a class this class is going to be time and then let's have a span element starting in a class this class is going to be time elapsed and here later we will get this time dynamically but here just to show something we should go with this imaginary time and i want to copy this and paste it here so this one is gonna be time duration okay and it's gonna be sorry time duration and zero point one okay six and you know here is you should have colon okay let me bring it here okay then after let's create that uh full screen icon so class is gonna be full screen and sorry for full screen and let's have an icon of fvs expand expand okay not extend expand okay save it and we have done with our html and see um only with the html part not with the css so here is the okay i it let's take here let me check it yep it shouldn't be here fine okay cool now let's go to the css and start working start styling it okay let's start styling this me video player okay so so let's go to the first of all here on main dot css let's go with the html and here it's assigned box sizing this will be equal to border box and let's go with the body body is gonna have a margin of zero minimum height this is gonna be 100 view height background and let's go with the background color and it's gonna be zero to seven eight eight seven display is gonna be flex and justify justify content this is going to be center and okay let's go with the bonus michaels so fps color for this it's gonna be white and first of all let me show you okay can see yep you cannot see here let's see and then we have to go with the font size which is 35 pixels let's go with the player class and the player is going to have a max width of 80 view weight then the minimum weight is gonna be 800 pixels and border let's go with three pixels solid and black let's have a border radius border radius is gonna be um 10 pixels then we would like to go with the background color and here the background color is gonna be black then position and it shouldn't be inherited it should be relative cursor pointer okay then save it okay so here you guys can see still we need to fix this and we are working on it okay so here again let's go to the video radio element okay and here should go with the border radius but the radius is gonna be three pixels and the width for this 100 i'm gonna tell you and height is gonna be auto save it okay so what happened here when we say that width is going to be 100 percent so that over um the the exaggeration of this part or this this player it was extending to this side to the means it was going out from the screen so to keep it within the screen within the limit we have used this border um sorry this within this video element we have used the width of 100 okay so this is how we have covered that now the next thing is container and here we have to go with the controls so the controls uh the width of the control is going to be 100 okay and then the height is going to be 30 percent let's use the z index it's gonna be two position is gonna be absolute bottom bottom is gonna be zero let's use cursor default again okay then let's use the controls here we do need to set the position which is going to be absolute let's use the bottom minus 5 pixels width is gonna be 100 percent height is also going to be 95 pixels margin top this is going to be -95 pixels background color rgba it's very dark okay so we are going to light it so rgb a 0 0 0 and 0.5 okay let's use the box sizing so the box sizing is gonna have a border box and the z index is gonna be five let's use display it should be flex justify content center uh sorry space between so there should be a space between okay then we have to go with the opacity so the opacity is gonna be zero and transition transition of 0.5 seconds is out two seconds okay save it and let me show you okay fine but not that much as it has to be okay uh still needs to still need to fix many many things the next is let's get the controls over and controls container so here the opacity is gonna be one and transition on 0.2 seconds ease out okay then we would like to go with the control [Music] group and here let's assign the width this is gonna be hundred percent one hundred percent high is gonna be again 100 percent and spelling of height okay then we do need display and display is gonna be flex justify content space between save it moving on to the browser okay so you guys can see oh we have to work with that black color um at the back and we have to fix all these things too okay so here again let's go with the left controls left controls and right controls2 so all right controls let's choose the flex the flex is gonna be one and the display is gonna be flex again overflow this is gonna be hidden and position relative let's use the top top is going to be 40 pixels save it okay still still still needs to need to work on it okay now let's work with this progress span so the progress span i'm talking about there isn't anything i'll show you and we cannot see so progress span it should have a height of 8 pixels the width is gonna be let's use the calc function here and 100 minus 30 pixels let's choose the background background is going to be rgba 202 and then 202 to a 2 and 0.5 so 0.5 at 0.5 okay the next is we're going to have a margin of auto and border radius border here border radius is gonna be 10 pixels then let's use the position position is gonna be absolute left is gonna be 15 pixels top 15 pixels cursor pointer transition height is going to be 0.1 seconds is in out and let's use the z index so the z index is gonna be 10 okay okay so you guys can see this progress span here okay now what we have to do next is progress span over and here the height is going to be 10 pixels when we hover over it it should be you know you can see a bit of expansion upon this span okay the next is we do had a class of do we have uh let me check again yeah now we are going to work with this progress bar so um progress bar okay it should have a background of red okay and the width is gonna be fifty percent height is gonna be one hundred percent border radius this is going to be 10 pixels let's have a transition transition is going to be all 0.5 seconds ease why i'm having this with 5 50 let me show you here you guys can see that it's 50 just to show you guys that something is going on but when you start working with javascript and it will work with the code or with the functions okay so then after this let's start working with the controls so the left controls you know the controls you have seen here pop and the left controls let's say justify content flex start okay and let's use margin left and it's gonna be 15 pixel save it move on to the browser okay then we do need to work with the uh play options so and play options i have the margin right margin right and margin right is gonna be 15 pixels then let's work with the volume icon and i have a cursor cursor is gonna be pointer let's use the volume line the volume bar or that volume line so what we have to do here let's go with the height height is gonna be eight pixels blue width for this it will be 100 pixels background rgba so 70 17 70 and 0.5 then we do need the border radius border radius and it's gonna be 10 pixels position relative top is going to be minus 21 pixels it's minus okay and left is gonna be 50 pixels cursor is cursor is gonna be pointer let's have a volume bar work with this volume bar and the background white blue width is only 100 height is gonna be again 100 percent water radius water radius would be 10 pixels choose the transition here with 0.2 seconds is in volume bar over background is gonna be red save it okay now let's work start working with the with these right controls okay this one with this um options playback options and this screen extension expansion for whichever right controls justify content and justify content flex and margin right it's gonna be 15 pixels let me bring it here let's use the speed and time so hold on speed and we do have a class of time so position is gonna be relative and top would be 10 pixels and yes okay then the next is select element and option so let's go with the cursor pointer again let's use the select element choose appearance and it's gonna be none then the background is gonna be transparent and color is gonna be white okay cool fine but not as i want it okay then the next is butter i'm talking about this butter okay so we don't want this butter here so border is gonna be none font size 18 pixels position relative and let's use the top okay the top is going to be minus 2.5 pixels and yep let me do heavy water radius water radius and it's gonna be five pixels okay the next way is select focus and let's say outline gonna be none then we need select option background color rgba 0 0 0 and 0.9 okay border none font size is going to be 14 pixels save it okay now we need to work with the time so let's go and start working with the time time is gonna have a margin right margin right 15 pixels color is gonna be white font weight board and let's use user select this is gonna be none okay and later i will change the font because it's i don't like this one later i'll change the font you guys can change it then what we do next we do next is that full screen and let's see cursor pointer save it and it's called video full screen where the position is going to be relative top would be 15 percent transform transform transformation we try translate translate y and this is gonna be minus fifty percent save it move on to the browser okay so there is this okay the next is it's not responsive okay so let's work with the media queries to make it responsive so for that i'm gonna do let me see for responsiveness let's use the media screen and the max width is gonna be 600 pixels this is for the vertical devices th okay and player player is [Music] the minimum where to play is going to be zero max width is gonna be 95 view width okay then we need our for also micros for that here the font size it's gonna be 20 pixels let's use the controls container height is gonna be 50 pixels control group position relative top would be minus 25 pixels progress span progress span is gonna have a width of 100 percent top is gonna be zero left is gonna be zero again border radius it's gonna be zero again now let's use the progress bar so border radius is gonna be zero let's have a volume line and the width for this is gonna be 50 pixels left is gonna be 30 pixels top is gonna be minus 15 pixels then we do need to work with the speed and time so the top is going to be 3 pixels let's work with the select and select should have a font size of 12 pixels then we do need to go with let's go with the time the time time and the time is going to be font size 12 pixels save it and then just to set the some more settings this is for the vertical devices and now let's work with the horizontal devices so let's say for a horizontal and for this again media screen and the max grid is gonna be 900 pixels then let's have a maximum height the max height is gonna be 500 pixels and let's use a player the player is having max height of 95 view height 95 view height and the maximum width is gonna be auto and let's use a video element here and the height for this is gonna mean again 95 view height 95 view height and object fill is gonna be covered i'll explain you what is this object fill and then after this let's have a video screen full so video screen for video full screen sorry it has a height of 97.5 view height and the border radius is gonna be zero save it move on to the browser okay there is uh it's object fit sorry not that object fill object fit sorry my apologies okay uh i'll explain it what is this object fit and here is the player okay let me show you the responsiveness of this okay it is here but um okay fine it's fine cool but you know what we when we will work with javascript you guys will understand and we will fix all the other issues okay so let's go to the javascript and start working with our with the functionality of this video player okay okay so we have done with our css um before moving on to javascript i have seen some errors made by me so the first one is here this is this controls is a class okay and if you see this this controls it's a class okay i forgot to add it it's a type of mistake and then i have found another mistake of mine which is about the speed okay so here i have to add a speed and this one is gonna be margin right 15 pixels okay let's go back to the browser so now now now it's fine okay we have done with our css okay before moving on to javascript let me tell you that in the beginning of this project the full in in this section here in the first div uh within the video element we have used this please in line i didn't explain it in detail let me tell you what this place in mind gonna do i'm going to give this link in the description below this csstrix.com and you guys can read this article it will explain you each and everything about please inline what does it mean and in how we can use it in web video so you guys will learn a lot i think if i explain you it's not so that much explanatory so the the guys they are explaining it to you in in in depth okay so i hope that you guys will read this article and we'll learn about this place in line and the different uses of this place in line okay then the second thing we have used in this css that is object fit please go to the mdn web docs and type object fit css property and it's going to tell you that again here it they have a wonderful explanation again i'm sure that i'm not going i i cannot explain you as well as they have explained here in their article so please go and read it and try all the syntax they have mentioned here with the example so i think i'm sure that you guys will understand this object fit property also from here okay so these are the two things i want to explain i want to tell you that you guys read these articles and you will learn more about this rather than my explanation okay i'm gonna give this for the links of uh these two in the description below please check the description okay and yes the code of this video also you guys will find it in the description so now let's go to our c uh javascript and start working with our java script so i'm gonna declare the variables here so the first one is gonna be player and document dot query selector it's gonna be player then another one video document dot query selector and we have to use a video progress progress span document dot query selector again we're gonna have progress span then progress bar and document dot query selector and it is a progress bar okay let's move on to the next one which is an id and this is the id of a play button so let's say play btn document dot query selector and this is an id so we are not going to uh sorry it's not a query selector this is an id so we should go with a get element by id method and here we are not going to use any kind of hash tags we are just using play btn okay the next is gonna be volume icon so it's my id so i get element by id and it's gonna be volume icon okay then we have a volume line and should say document and the volume line is a query selector so query selector and we have to say volume 9 okay another variable this one be volume bar document dot query selector and we have to go with the volume bar speed query selector and we have to define the player speed then we gonna use current time document current time is going to be query selector and we should use time elapsed class so there after we have to go with the duration and document query selector time duration let's use another variable of full screen for full screen button and it's full screen okay document and query selector method and let's say full screen okay so we have declared our variables here and the next thing is here i would like to define the event listeners so the first one listener let's have a play btn add a mentor listener and we are going to use a click event here and let's name it toggle play and i would like to have another one which it will be video add event listener again click uh let me tell you what this will do uh toggle play pl toggle play okay so whenever we will click on this um okay here on this button it will play plus we have said we have said that video also so whenever we click anywhere on the video it will play so that's why we have this one for video and for the play button okay so let's create this toggle function first and this toggle p okay here i'm gonna have my function function is going to be toggle play and within this function let's apply a condition that if video paused if video paused then video should be play okay and fine else the other condition would be video pause not paused pause okay save it move on to the browser and when i click here it is playing if i click on the button again okay but we cannot see any kind of changes in the button so like it's playing we don't know that it's playing it's just um there isn't any kind of other option or a pause button which shows that the video is moving or you know so first of all let me close these tabs okay for this let me let me try to explain you with the code so play button let's add a classlist property and let's see replace for an awesome icon fail and f a pause okay and let's set the attribute so play btn and set attribute the attribute we gonna set is a title and the title is gonna be pause okay save it let me show you what i was trying to explain here when i click on the button now the button changes it replaces itself to the pause button if i click here okay but now it's it's on pause let's do something else with this so that something else is let's create another function here function this function is going to be display play icon and play btn classless property so replace pause the pause is gonna be replaced with the play okay play and again let's set the attribute so set attribute and attribute we're gonna set as a title here title is gonna be play okay now let's call this function this display play icon function here save it okay move on to the browser let me click here anywhere on the video okay and now when we stop it's back to it play position because we here we replace it the pause replace it replaced with the play button and here on top the play replaced with the pause button okay or the pause icon let me play it from the button you guys can see the attribute we have we have mentioned the attribute to play and the pause attribute okay fine there is another thing that when this video ends it should play you know the video ends and it is still there is a pause button uh we wanted to back it into the play button so how we can do that let's go and let's have an i went here so let's say video dot add i went to listener and here we should use ended okay and display play icon okay now it's gonna display the play icon go back to the browser let me click on the button [Music] okay so when the video ends the pause back to its position which was this play one okay so i hope until here you guys understand what we have done okay now let's start working with this progress span and this time okay so for this first of all let's let me go to the event listeners and here i would like to go with the video dot add orange listener and the event listener i would like to have here is a time update and then span up update okay we are going to update this time and spam okay and the other one we are going to have again it's a video and i went listener and here we are going to use the can play event we can play and we are going to use the same span update function let's create this span update function below okay so what i'm going to do here in this uh section just i would like to have a function here the function is going to be span update and let's say console dot log and current time so current time then we have to say we are saying that video current time and then duration and video duration okay save it move on to the browser here in the console you guys can see that the total duration of the video is 13.333 seconds and when i play this video you will see that the time is increasing okay it was it starts from 1 okay 0 2 2 4 6 7 2 1 2 three four if i play it again like okay so it's moving the time is moving but here we are not updating the time is not updating here and the span is also on its same position so let's go and work on this thing first of all let's comment out this console and for updating this or updating this progress bar or this fan how we are going to do we say progress bar and style dot width oops style width here we are going to use the templates and should say video video current time divided by video duration and it we will multiply this with 100 and we are going to see 100 because here it changes the css properties the css property is gonna change so let me show you here and here is the progress bar you know we can you see there isn't that red color we had before so here is the element and first of all the progress is fan let me open it for you guys the width is zero percent okay let me play it and just you guys just notice this section let me bring it here easy for you to see okay so just notice here and the width it is telling the time of the width [Music] 8 92 100 okay but here the span is moving on that's good great but the timing is not changing so let's let's go and start working with the time okay let it be like this no need to change okay so for the time what we have to do let's create another function this function is gonna be show time and let's pass time within this function let's have a const of minutes and we're going to use the math dot floor method we are saying time divided by 60 and let's seconds uh again math dot floor method and let's say time the remainder the remainder of this is 60 okay so time modulus 60 our remainder 60 what we have to do next is let's let's say second is equal to second greater than mine we are using the ternary operator here and second let's use the chamber string here and we should say second and it will return the it will return the minutes so you guys will understand let me do this and i'll explain again seconds and error typewriter okay and now let's have this showtime function here let's have it here so current time then the text content and we should go with the template strings we have to say that the show time okay it's gonna show the time video current time okay and then we have to ask the duration text content sorry hold on just a minute okay and duration text content then again we're gonna use the to show time and video duration save it move on to the browser not this one here and okay so now you guys can see that that function is showing the actual time of the video let me if you want to be here okay let's play [Music] and it was updating continuously now what we need is that when we whenever we click anywhere here on this progress bar it should seek that certain part of the video should move on to that certain part of the video so for that let's go and create a function for that one okay so let's go back here after this spam update we should um create a function that when we click on that it should go to that certain part of that of the video okay so here is the function function is going to be span time okay let's pass event here and console not log now that's fine it went i'm gonna explain you this [Music] and not not this one not it not here hold on let me do it again when i click here it's not working let me check oh yeah you know what i haven't created this spend time i haven't i didn't call it here so first of all let's go and call this function here so it's gonna be progress span and add event listener and click when we click let's say span time okay my apologies now let's go back and let me click here okay you guys can see when i click on the um in the beginning there is a the event occurs and let me click here at the end the event occur first of all let's go to this event and let me show you at what i'm looking for here i'm looking for this offset x so when i clicked here on top here in the beginning it the offset is offset x is 11 okay and let me show you this is the first one the one we call in the beginning and this is the one we have called uh here and we clicked here at the end and here the offset axis 1183 these are the pixels these are the pixels we it is telling us about the pixels how we can do this now let me go back and not to talk too much let's code and you guys will understand so let's have a const call create a new time function here new time constraint and it's gonna have an event of set x divided by [Music] progress span and offset width okay then progress bar style dot width and i'll show you what is this will what kind of function this will perform okay and let's have a new time multiplied by 100 and again the percentage and let's say video uh you know if we cancel it i don't think we need a console.log let's let's go directly video dot current time and here we have to go with the new time it's gonna multiply to with the video duration okay sorry save it move on there is something okay let's go and play [Music] when we come back it is you know it comes back to the seven seconds if i click here two seconds again five seconds seven seconds the time is updating here again twelve at the end thirteen so it is working nicely you can see here again one second two five okay so it's working fine now the next thing is that what we have to do next is hold on let's go to the browser okay so we have done with our play button with this span with all these capables and with the timing also now let's start working with our volume volume bar and monument so here first of all let's go to this event listeners and let's have a event and this event is going to be let's call volume line add i want listener and this i'm gonna work on click and let's say change volume and let's have okay let's work with this change volume first okay so how we can do this go down let's start working with so let's say volume create a function function is going to be change volume press and event and let's select volume and offset x and volume volume line with the off set width okay and let's do console.log [Music] say volume save it here we are here is the volume 0 hey at this point is 0.07 two 0.23 point five one seven six nine point seven and point nine seven seven nine four six and blah blah blah okay so you have seen the values here now let's uh rounding up or down these volumes okay let's comment on this one and let's uh round up or down the value so for that if let's apply the condition here if volume is less than 0.1 then volume is gonna be zero and let's have another condition that would be if volume is greater than 0.9 then the volume is gonna be one okay save it then after let's work with this okay so now let's work with this volume bar so to style it first of all let's say volume bar style dot width equals to okay width and let's use the backtick this is gonna be volume multiply by 100 and percent then we have to use the video volume which will be equal to volume save it and let's check okay need to work again now let's work with the icon so [Music] then after it will it will be fine and unders understood that how we can do this change the icon okay let's change the icon so [Music] let's let's change this icon according to the according to the volume we need to change this icon so for this what we have to do let's go and let's see volume icon class name class name and then we have to see if volume is greater than 0.7 then volume icon it's going to add a class list and has to add for awesome icons so let's add a phone awesome icon f a volume up let's have another condition that would be else if volume is less than 0.7 and volume is greater than zero so in this condition let me bring it here okay so in this condition the volume icon get the class list property and add an other font awesome icon and this would be f a volume down spanning of volume volume down then there would be another condition that would be that if else volume is equal to zero then volume icon volume icon sorry add the class list property and then it will add again a phone osmica and that would be f a volume off and then it will have an ending volume so let's say end and volume that would be equal to volume and let's have this and volume let's call this n volume here on top so we can say let's declare this variable that end volume that will be equal to one save it okay let's move on to the browser and let me close it and let's check that sound is very low then bring it here actually the sound is [Music] let's see the difference there isn't any sound let me okay and so there is no sound okay and the icon is also okay so you guys have seen that when we has a full sound when we bring it here the i can change and the difference between the sound it's it is slower and if i click again it is more slower right and again if i don't have anything it's it's on zero so when i click on it then there is no sound okay so i want to have a another option over here on this icon that when we don't need any kind of a sound we don't have to bring it to like this we just have to click on the icon and it has to stop the uh music or the sound so a kind of a mute okay not a kind actually it has to move so let's start let's go and start working on the muting function let's go to the event listeners and here first of all i would like to have a rent a volume icon add event listener and this is gonna be click and this click is this will have a function this toggle mute let's go down and start creating this mute function so let's say mute okay let's have a function toggle mute and within this function let's have a volume volume icon and a class name that will be equal to nothing then let's apply a condition here the condition is gonna be if video volume and if video volume would have a end volume [Music] and volume then the [Music] video volume that will be equal to video volume and the video volume radio volume will be equal to zero okay and volume icon where the classlist property has to add uh for an awesome icon and that one awesome icon is going to be f a volume mute and volume icon will set an attribute and everywhere is gonna have a title and title is gonna be unmute okay mutant unmute and then we should say that the volume bar here we are styling the volume bar volume bar style width gonna be zero okay so it's the volume bar style uh would be zero let's use other condition else video volume gonna be end volume video volume gonna be end volume and volume icon and a classlist property let's add a for awesome icon and that let's add one awesome icon and that will have a f a volume up and again the volume icon setting attribute set attribute and attribute is gonna be title and then it's gonna be mute okay so let's work with the volume bar and style width and that will be equal to what it gonna do the end volume when there will be an end volume means that would be we will be we will multiply this with 100 and 100 and get the remainder let's save it i'll show you how it works okay so here is the video what we have to do let's play this click on it and there is no sound click on it there is a sound okay [Music] it is increasing timely so this is what we have done with our volume icon plus with this volume bar the next we have to do we have to work is with the speed to change the speed and at the end we will do this expansion on this free screen expansion so let's go and start working with the speed okay first of all let's go to the event listeners here on top i have my event listeners first of all i would like to say speed dot add event oops add and listener and let's say change we are going to call the change event here and the change event is gonna change speed okay so let's call create this change speed function here the bottom okay let's create a function the function is gonna be change speed okay so we have a change speed function let's do console dot log and video playback video playback rate and then we have to do video playback read and yeah video playback rate save it and um function change speed and i think there must be a problem somewhere let me check my arrange or change speed yep and yes you know and i'm calling kind of parameter change speed and then let's have an other console let's go to the browser here console.log let me bring it here again console okay and just a minute let's console console.log and let's say selected value and then speed value okay speed value selected value speed value and this shouldn't be a coach here is error value okay so it's speed value speed oh really sorry sorry okay just let's move on actually there is a construction going on in my neighbors and i just want to avoid those all that stuff so you can see here playback rate 1 selected value 0.75 let's go to this one one and one you guys can see here then let's go here it is playback rate 1 selected value 2. okay selected value 0.5 so let's go let's comment out this one and this one and let's say video play back rate and this will be equal to speed value save it and move on to the browser so let me close it so here it is [Music] which if we decrease the speed to 0.5 let's go back notice it's 0.5 okay and if we go to it's it's half of the speed and if we go to one then you guys can see the difference the normal one and if we go to 2 then [Music] see it's the highest one so that we have done with our speed also now let's go and work with this expansion or full screen okay so with the full for the full screen first of all let's go on top to my event listeners and here but let's say full screen vtm add event listener and this time we are having an event of click then toggle full screen okay toggle full screen and for full screen what i'm gonna do is let me save it here and here at the bottom again i'm gonna give this link in the description below it is w3 where is that let me show you w3schools okay and here in the how to section let me show you that we they have here they have given the full example of this so i've got this code from here it is not difficult to understand just let me copy this code from here and we are just going to change the variable it's the name it element so we are going to change it to element and let's copy this one from here and here let's say full screen and here is that now what i'm gonna do i'm just gonna add to what i'm gonna do i'm just gonna add the element here so elem and the it is here for different browsers okay so here let's add a video classless ad and what we have to do here we have to say video full screen okay and then at the bottom here we should remove the class so we should say video dot class list and remove over there we added here we are going to remove it so we have to say video full screen and then we should say that let full screen is equal to false okay and that function the toggle function let's create the toggle function here the toggle full screen so toggle full screen uh hold on let me check is there any error in my function here on top toggle full screen okay toggle full screen and then if not uh not full screen using ternary operator here then open full screen player and else close close full screen sorry close full screen okay and full screen not equal to not full screen save it move on to the browser here is a player okay so it is opening in a full screen and again it is back to its normal position and so this is what we have done with our video player i hope that you guys like this project it will help you in learning javascript the next project i am planning to create uh this theme changer okay this would be the next project in which we will learn how we can create this toggle more this dark and light more in any website so don't forget to subscribe the channel if you didn't subscribe yet and if you like this video don't forget to hit the like button let me show you the all the functionalities we have created in this one so you let's start working okay it is playing the button is also working it is also working then this uh volume bar it is working from the volume bar okay and it was also muting and it it's giving us five volume speed timing okay let me bring it to bed and bring it back and here you guys can see the time also plus the toggle functionality of full screen and the normal screen and i hope that you guys like this project if so don't forget to subscribe the channel and wait for the next project in which we are going to learn to add that light and dark sorry light and dark flame okay so see you in the next project hasta la vista ciao

Channel: Code with Erum

Views: 640

Keywords: HTML 5, CSS 3, Restaurant website, construction website, coffee shop website, webdesign, how to design a website, how to develop a website, how to create a gym website, how to create restaurant website, how to create a website using bootstrap 4, ngo website, how to create a ngo website, how to create e-commerce website, responsive website, how to create a video player in html, video player in javascript, how to make video player in javascript, create video player in javascript

Id: 2TvHMDNQxt4

Length: 111min 8sec (6668 seconds)

Published: Sat Aug 14 2021