"Progress" is used to get the buffer data from the video. Is usefull to create some preloader buffer bar to you know how much video your browser is already downloaded.
@ 14:16 listening for the the 'input' event on the sliders seems like a cleaner solution than 2 listeners and a flag. Thanks for the amazing tutorial !
4:23 - Build function for toggle play 6:03 - Hook up the event listeners I will be back to update my study I just mark the main point. Hope you feel comfortable with this
Hi, great video! The progress event is fired when the progress of downloading the media from the server changes, not when the current time of the video playback changes.
This is super cool - Thanks Wes! Bug fix I needed was to add one more event listener for mouseleave: progress.addEventListener('mouseleave', () => isMouseDown = false); Explanation/Scenario: User clicks and drags progress bar. User moves mouse off of/outside of the progress bar. Result: the mousedown stays true and video scrubbing when my mouse went back over progress bar. However, this is not desired from my perspective. The mouseleave event essentially acts like mouseup in this case, so when user has clicked and dragged and accidentally moves off of progress bar before mousing up, this line of code it will set mousedown to false. In my case I renamed the variable mousedown to isMouseDown so I did not confuse the mousedown event with the boolean variable isMouseDown.
17:10 sorry, what are those characters around the percent variable? they look like {} but when I put that in I get a console error. nevermind I didnt write function before handleProgress. kill me
Nice one. However, when you have more than one video on a page it works only for the first one you click, because everything is tide up to classes. Is there any way to fix it without adding manually id's or sub-classes?
Okay so I've been trying to replicate the scrub found at 15:42 for an audio player, and despite copying the code to a t, it doesn't work at all. When setting my audio.currentTime = scrubTime, the audio.currentTime sets itself to 0 regardless of what scrubTime is, and the song restarts again. I've tried everything but I have absolutely no idea.
I managed to find a little bug with this one. How can I limit the if statement to only fire after the second mouse click? - I find if I select the first Tickbox with shift held down, then all the checkboxes are selected. This related to Shift and Select Tutorial video.
Can you make a tutorial for html 5 video with event listeners for it to: - pause when not on screen and play when on screen. -autoplay -loop -mute -hide absolutely all controls - video player has softer/rounder corners with border radius ... Is this possible?
why when i switch to fullscreen mode, my controlbar changing back to basic, how do i change it to my custom controlbar? can u share some link to how to do that?
call player.requestFullscreen() it will work! I too had the same problem then I realised I was calling the requestFullscreen() function on video but you have to call it on player! hope that solves your issue
When I write the code for js: const player = document.querySelector('.player'); I get (Player is defined by never used) How do I fix it? Thanks for any and all help!
nice video.. noticed you are using const for icon in updateButton method.. Since it changes depending on pause property I believe in this case let is more appropriate. Best of luck
The main difference between const and let is let allows for the variable to change its value (for a value type - number, string, boolean) or change its reference for a reference type (object, function, array). In this case const is appropriate since its value (a string) is not being changed once it is assigned. The ternary expression is completely evaluated before any assignment happens, so while the variable could be assigned one of two different values the variable is only ever assigned one/once.
I'm using Julbul player to customize the look and feel of youtube player and to remove youtube logo from embedded videos :) This player really cutt my cost
Struggling at 19:20. I've got the code, I've checked the code vs the above and vs the scripts-FINISHED.js file... My console isn't doing what yours is. Am I being blind? function scrub(e) { console.log(e); } /* Hook up the event listeners*/ video.addEventListener('click', togglePlay); video.addEventListener('play', updateButton); video.addEventListener('pause', updateButton); video.addEventListener('timeupdate', handleProgress); toggle.addEventListener('click', togglePlay); skipButtons.forEach(button => button.addEventListener('click', skip)); ranges.forEach(range => range.addEventListener('change', handleRangeUpdate)); ranges.forEach(range => range.addEventListener('mousemove', handleRangeUpdate)); progress.addEventListener('click', scrub);
somehow i managed to make the full screen button work. Took me some time to get it in agreement with already declared css rules and class names. html: ⛶ css: .player__Fullscreen { font-size: 15px; font-weight: bolder; color: white; cursor: pointer; } .player__Fullscreen:hover { color: aqua; } javascript: /* Get the elements */ const fScreen = player.querySelector(".player__Fullscreen"); /* Build the functions*/ function toggleFullScreen() { if (video.requestFullscreen) { video.requestFullscreen(); } else if (video.webkitRequestFullscreen) { /* Safari */ video.webkitRequestFullscreen(); } else if (elem.msRequestFullscreen) { /* IE11 */ video.msRequestFullscreen(); } } /* Hook up event listeners */ fScreen.addEventListener("click", toggleFullScreen);
