Custom HTML5 Video Player - #JavaScript30 11/30

[macos-brasil]

"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.

[quentinmckay]

@ 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 !

[FarhanShaikh-szww]

For Full Screen :

<button class="player__button" (Edit in HTML)

(And in JS File)
function openFullscreen() {
if (video.requestFullscreen) {
video.requestFullscreen();
}
}

[AnhMinh-rjbj]

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 <3

[woung]

What a heartwarming story. You should watch it before the next chapter!

[erikhendin]

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.

[Martiesim]

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.

[SherazManzoor-ps]

Thanks man for teaching us. Well where is the solved version?

[EugeneVe]

Its all great but how to be with a fullscreen?

[zoomerpanda]

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

[LucasMeadows]

😂 don't send me angry mail, just don't use it.

[dingjoyce]

At 15:24, I don' t understand why this.name = this.value; string = float?

[VedanttMehtaa]

How to store current time in local storage so that if i closed the window and Restart it i play back from the same time???

[elchinhuseynli]

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?

[danbuild]

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.

[basantakc]

How can we put direct icon on html?? Anyone without font-awesome . Like wes did for pause and play

[tonyi]

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.

[KumataZabka]

Solution for full screen homework

HTML:
<button id="fullscreen"
JS:
const fullscreen =
function openFullscreen() {
video.requestFullscreen && video.requestFullscreen();
};
fullscreen.addEventListener("click", openFullscreen);

or even with arrow function:
fullscreen.addEventListener(

"click",
() => video.requestFullscreen && video.requestFullscreen()
);

[bokisa]

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

[silvrsurfer]

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?