How to build a video player in Javascript

` tag is used to display pre-defined content to user agents that do not support the `video` element. The HTML5 `

` tag to the `index.html` which will act as the progress bar: ```html

// ..

``` Then open the `script.js` and add the following snippet: ```javascript const progress = document.querySelector(".progress"); const progressBar = document.querySelector(".progress__filled"); function handleProgress() { const progressPercentage = (videoContainer.currentTime / videoContainer.duration) * 100; progressBar.style.flexBasis = `${progressPercentage}%`; } function jump(e) { const position = (e.offsetX / progress.offsetWidth) * videoContainer.duration; videoContainer.currentTime = position; } videoContainer.addEventListener("timeupdate", handleProgress); progress.addEventListener("click", jump); let mousedown = false; progress.addEventListener("mousedown", () => (mousedown = true)); progress.addEventListener("mousemove", (e) => mousedown && jump(e)); progress.addEventListener("mouseup", () => (mousedown = false)); ``` In this snippet, the `progress` container and the `progress__filled` element will be selected and two functions will be added: `handleProgress()` and `jump(e)`. `handleProgress()` will be responsible for updating the progress bar. The `jump(e)` function is used to enable clicking on the progress bar to jump to the position within the video. The last part contains all event listeners that are needed for the progress bar. The `handleProgress()` will be called at every `timeupdate` event. Also clicking anywhere on the progress bar will call the `jump(e)` method and the video will jump to the position. Additionally, `mousedown`, `mousemove`, and `mouseup` will be used to enable *sliding* through the video while holding the mouse button down on the progress bar. ## Closing Notes Congratulations, if you followed the tutorial you learned how to implement your own video player and add custom controls using JavaScript. Now, you can use [my CodePen](https://codepen.io/paulknulst/pen/qBYNxxa) and start implementing more controls like **volume control**, **keyboard shortcuts**, or **skip controls** to build your own customized video player. At the moment, I am working on a follow-up tutorial where I extend this code to add keyboard controls and add additional functionality. It will be published on [my personal blog](https://www.paulsblog.dev/) and later on Dev.to/Medium. Have any questions? No problem, just ask in the comments section. I will answer everything. This article was published on my blog at [https://www.paulsblog.dev/how-to-build-a-video-player-in-vanilla-javascript-and-html5/](https://www.paulsblog.dev/how-to-build-a-video-player-in-vanilla-javascript-and-html5/) Feel free to connect with me on [my personal blog](https://www.paulsblog.dev), [Medium](https://medium.knulst.de), [LinkedIn](https://www.linkedin.com/in/paulknulst/), [Twitter](https://twitter.com/paulknulst), and [GitHub](https://github.com/paulknulst). --- **🙌 Support this content** If you like this content, please consider [supporting me](https://www.paulsblog.dev/support/). You can share it on social media or [buy me a coffee](https://buymeacoffee.com/paulknulst)! Any support helps! Furthermore, you can [sign up for my newsletter](https://www.paulsblog.dev/#/portal/signup/) to show your contribution to my content. See the [contribute page](https://www.paulsblog.dev/contribute/) for all (free or paid) ways to say thank you! Thanks! 🥰 --- [Image by storyset](https://www.freepik.com/free-vector/media-player-concept-illustration_9936448.htm#query=video%20player&position=6&from_view=search) on Freepik