How to Build a Video Player in Vanilla Javascript And HTML5
Tags: javascript, webdev, html, programming
Published: 2022-10-18 16:14:04

[Paul Knulst](https://www.paulsblog.dev)  in  [JavaScript](https://www.paulsblog.dev/tag/javascript/) • Oct 13, 2022 • 6 min read

* * *

Probably, a decade ago it was impossible to play your video or audio inside of your browser without any third-party services such as Flash or Silverlight. You needed to install a plugin and only play your media while using it, so as you can see it was very uncomfortable, with low speed and high delays. Nowadays, we have JavaScript with the new version of HTML5, with these new technologies and tools we can stream our video much quicker, easier, and without any latency. To do it you will need only a simple `<video>` tag that was added in HTML5 and give a link to your video stored on your computer. Then, by using one simple attribute called `controls` you’ll have a default video player which was built into the browser. It’s elementary and doesn’t have many features, so if you want to stream a video on your website in a more professional way using your personal video player, you’ll need to use JavaScript. And we’ll teach you how to do it in this article!

By the end of this guide you’ll have something [similar to this Codepen](https://codepen.io/paulknulst/pen/qBYNxxa), so if you’re excited, keep reading and follow this tutorial step-by-step!

Setting Up the Project
----------------------

Assuming you are working with UNIX system (or have Git BASH on Windows) you can create all three files that are necessary to build a video player in JavaScript with this command:
```bash
mkdir video-player
cd video-player
touch index.html script.js style.css
```

To add a simple video player to our application we have to add the following code to our `index.html`:

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>How to build a video player in Javascript</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div class="player">
            <video class="video" controls>
                <source
                    src="https://ftp.f1nalboss.de/data/imgly/videoplayer/testvideo.mp4"
                    type="video/mp4"
                />
                <source
                    src="https://ftp.f1nalboss.de/data/imgly/videoplayer/testvideo.mp4"
                    type="video/webm"
                />
                <p>No HTML5 video supported</p>
            </video>
        </div>
        <script src="script.js"></script>
    </body>
</html>
```

Within the above code, the `<video>` element uses a remote video from my FTP. You can either use my default video or add any video from your local computer by adjusting the `src` attribute. HTML5 specification supports three different video formats and the snippet used multiple `<source>` tags to make the videos available in MP4 and WebM. Furthermore, the `<p>` tag is used to display pre-defined content to user agents that do not support the `video` element.

The HTML5 `<video>` tag accepts several native attributes. For example, the `controls` attribute displays the standard player controls when added or set to true. You can find out more about [all video attributes here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-controls).

Before continuing you should apply all styles that are needed within this tutorial by populating your `style.css` with all styles [from this CodePen](https://codepen.io/paulknulst/pen/qBYNxxa). Save and open your `index.html` and load it within the browser to see the embedded video player as seen below:

| ![Screenshot of the video player UI](https://www.paulsblog.dev/content/images/2022/09/image-6.png) |
|:--:|
|<center>*Screenshot of the video player UI*</center>|

Customize the Video Player With JavaScript
------------------------------------------

To customize the video player, you first have to remove the `controls` attribute that displays `Play`, `Pause`, `Volume`, etc because you will implement your own custom controls within this tutorial. Now, check your browser you will recognize that the controls are gone and you cannot play the video anymore.

| ![Screenshot of the video player UI without controls attribute](https://www.paulsblog.dev/content/images/2022/09/image-7.png) |
|:--:|
|<center>*Screenshot of the video player UI without controls attribute*</center> |

### Add Play and Pause

To enable play and pause the video you have to add a new button to the `index.html`:
```html
<div class="controls">
    <button
            class="controls__btn playPauseBtn"
            title="Toggle Play"
            >
        ►
    </button>
</div>
```

Afterward, open your `script.js` and enable functionality by adding this code:
```javascript
const videoContainer = document.querySelector(".video-container");
const playPauseBtn = document.querySelector(".playPauseBtn");
function togglePlay() {
  if (videoContainer.paused || videoContainer.ended) {
    videoContainer.play();
  } else {
    videoContainer.pause();
  }
}
function updatePlayBtn() {
  playPauseBtn.innerHTML = videoContainer.paused ? "►" : "❚❚";
}
playPauseBtn.addEventListener("click", togglePlay);
videoContainer.addEventListener("click", togglePlay);
videoContainer.addEventListener("play", updatePlayBtn);
videoContainer.addEventListener("pause", updatePlayBtn);
```

Within this javascript code first the `video-container` element and the `playPauseBtn` is selected (Line 1 and 2). Then two functions will are defined: `togglePlay()` and `updatePlayBtn()`. `togglePlay()` is used to stop and start the video based on its actual state. `updatePlayBtn` is used to switch between the Icon which is shown within the video player.

In the last part of the snippet, a click event listener is added to the `playPauseBtn` that executes the `togglePlay()` function. Next, three click event listeners are added to the `videoContainer` that executes `togglePlay()` on mouse click and also executes `updatePlayBtn` based on the video's state.

Now you can reload your `index.html` and should be able to play and pause the video by either clicking the video or the button:

| ![Animated demonstration of play and pause  of the video player](https://www.paulsblog.dev/content/images/2022/09/playpausecontrol.gif) |
|:--:|
|<center>*Animated demonstration of play and pause of the video player*</center> |

### Add A Progress Bar

Next, a progress bar will be implemented to show the current timestamp of the video when played. First, add a `<div>` tag to the `index.html` which will act as the progress bar:

```html
<div class="controls">
    <div class="progress">
    	<div class="progress__filled"></div>
    </div>
    // ..
</div>
```

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


* * *

Did you find this article valuable? Want to support the author? (... and support development of current and future tutorials!). You can sponsor me on [Buy Me a Coffee](https://buymeacoffee.com/paulknulst) or [Ko-Fi](https://ko-fi.com/paulknulst). Furthermore, you can become a free or paid member by [signing up to my website](https://www.paulsblog.dev/#/portal). See the [contribute page](https://www.paulsblog.dev/contribute/) for all (free or paid) ways to say thank you!

* * *

[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