How to make custom HTML5 video player with custom seek bar?

[uscircuitpool]

I want to create my own HTML5 video player.

which has custom seek bar where user can drag and slide over video durations, and most importantly I want to know

how to implement a feature which highlights how much the video is buffered and loaded on client side? (just like how YouTube player shows how much of video data is loaded)

[m3g4p0p]

@uscircuitpool

custom seek bar

You might use a range input (see here for styling), and sync it to the video like so:

<video src="./video.mp4" autoplay></video>
<input class="seekbar" type="range" min="0" max="100"></input>

const video = document.querySelector('video')
const seekbar = document.querySelector('.seekbar')

video.addEventListener('timeupdate', () => {
  seekbar.value = video.currentTime / video.duration * seekbar.max
})

seekbar.addEventListener('change', () => {
  video.currentTime = video.duration * seekbar.value / seekbar.max
})

If you want to implement your own draggable seek bar from scratch that’s not that easy though… especially considering accessibility and animation performance. But a range input would certainly be a good starting point.