{"id":27761,"date":"2023-06-16T07:00:00","date_gmt":"2023-06-16T14:00:00","guid":{"rendered":"http:\/\/build-a-custom-html5-video-player-with-javascript"},"modified":"2025-10-10T15:05:44","modified_gmt":"2025-10-10T22:05:44","slug":"build-a-custom-html5-video-player-with-javascript","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/build-a-custom-html5-video-player-with-javascript","title":{"rendered":"Build a Custom HTML5 Video Player With JavaScript"},"content":{"rendered":"

The HTML5 video player code specification was introduced via the <video><\/code> element, which can be used to embed video content into web pages, and it is well supported across modern browsers. In this post, you\u2019ll learn how to embed an HTML5 video player and define an HTML video custom controls that are independent of the browser defaults.<\/p>\n

There\u2019s a link<\/a> to the demo in the CodeSandbox tool below so you can open it and play around on your own.<\/p>\n<\/div>\n\n\n

\n <\/iframe>\n <\/div>\n\n\n

Setting Up the Custom Video Player Project<\/h2>\n

Run the following command to create three files, index.html<\/code>, style.css<\/code>, and script.js<\/code>, in a folder called custom-video-player<\/code>.<\/p>\n

mkdir<\/span> custom-video-player<\/span>\ncd<\/span> custom-video-player<\/span>\ntouch<\/span> index<\/span>.html<\/span> style<\/span>.css<\/span> script<\/span>.js<\/span>\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
To embed an HTML video player into our application, let\u2019s add the following to our index.html<\/code> file:<\/p>\n
<!DOCTYPE html<\/span>><\/span>\n<html<\/span> lang<\/span>=\"en\"<\/span>><\/span>\n  <head<\/span>><\/span>\n    <meta<\/span> charset<\/span>=\"UTF-8\"<\/span> \/><\/span>\n    <meta<\/span> name<\/span>=\"viewport\"<\/span> content<\/span>=\"width=device-width, initial-scale=1.0\"<\/span> \/><\/span>\n    <title<\/span>><\/span>Custom HTML5 Video Player<\/title<\/span>><\/span>\n    <link<\/span> rel<\/span>=\"stylesheet\"<\/span> href<\/span>=\"style.css\"<\/span> \/><\/span>\n  <\/head<\/span>><\/span>\n  <body<\/span>><\/span>\n    <h1<\/span>><\/span>Video Player<\/h1<\/span>><\/span>\n    <div<\/span> class<\/span>=\"video-player\"<\/span>><\/span>\n      <video<\/span> class<\/span>=\"video\"<\/span> controls<\/span>><\/span>\n        <source<\/span>\n          src<\/span>=\"https:\/\/res.cloudinary.com\/ifeomaimoh\/video\/upload\/v1650567487\/speech_ofvfzq.mp4\"<\/span>\n          type<\/span>=\"video\/mp4\"<\/span>\n        \/><\/span>\n        <source<\/span>\n          src<\/span>=\"https:\/\/res.cloudinary.com\/ifeomaimoh\/video\/upload\/v1650567487\/speech_ofvfzq.mp4\"<\/span>\n          type<\/span>=\"video\/webm\"<\/span>\n        \/><\/span>\n        <p<\/span>><\/span>Your browser doesn't support HTML5 video.<\/p<\/span>><\/span>\n      <\/video<\/span>><\/span>\n    <\/div<\/span>><\/span>\n    <script<\/span> src<\/span>=\"script.js\"<\/span>><\/span><\/script<\/span>><\/span>\n  <\/body<\/span>><\/span>\n<\/html<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
The video<\/code> tag also accepts several optional native attributes, such as controls<\/code>, which display the standard HTML5 player controls interface when specified or set to true. Click here<\/a> to find out more about other attributes.<\/p>\n
Before we continue, let\u2019s add some styles to give our app a decent look. Populate your style.css<\/code> file with styles from this CodeSandbox link<\/a>. If you preview the page in your browser, you should see the embedded video player as seen below:<\/p>\n
\"GIF<\/p>\n
Customizing the HTML5 Video Player<\/h2>\n
Before customizing the video player code, we need to remove the controls<\/code> attribute, which displays video controls such as Play<\/code>, Pause<\/code>, etc., and then build our custom controls. Update the <video><\/code> element in your index.html<\/code> file as shown below:<\/p>\n
<video<\/span> class<\/span>=\"video\"<\/span>><\/span>\n  <source<\/span>\n    src<\/span>=\"https:\/\/res.cloudinary.com\/ifeomaimoh\/video\/upload\/v1650352188\/production.mp4\"<\/span>\n    type<\/span>=\"video\/mp4\"<\/span>\n  \/><\/span>\n  <source<\/span>\n    src<\/span>=\"https:\/\/res.cloudinary.com\/ifeomaimoh\/video\/upload\/v1650352188\/production.mp4\"<\/span>\n    type<\/span>=\"video\/webm\"<\/span>\n  \/><\/span>\n  <p<\/span>><\/span>Your browser doesn't support HTML5 video.<\/p<\/span>><\/span>\n<\/video<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
If you check your browser, you should see a non-interactive player.<\/p>\n
\"image<\/p>\n
Toggle the Pause\/Play State<\/h3>\n
To add the pause and play functionality to our player, let\u2019s update our index.html<\/code> file with the following:<\/p>\n
<div<\/span> class<\/span>=\"video-player\"<\/span>><\/span>\n  <video<\/span> class<\/span>=\"video\"<\/span>><\/span>\/\/...<\/video<\/span>><\/span>\n  <div<\/span> class<\/span>=\"controls\"<\/span>><\/span>\n    <button<\/span> class<\/span>=\"controls__button toggleButton\"<\/span> title<\/span>=\"Toggle Play\"<\/span>><\/span>\u25ba<\/button<\/span>><\/span>\n  <\/div<\/span>><\/span>\n<\/div<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
In order to add some interactivity to your JavaScript video player, add the following to your script.js<\/code> file.<\/p>\n
const<\/span> video = document<\/span>.querySelector(\".video\"<\/span>);\nconst<\/span> toggleButton = document<\/span>.querySelector(\".toggleButton\"<\/span>);\nfunction<\/span> togglePlay<\/span>(<\/span>) <\/span>{\n  if<\/span> (video.paused || video.ended) {\n    video.play();\n  } else<\/span> {\n    video.pause();\n  }\n}\nfunction<\/span> updateToggleButton<\/span>(<\/span>) <\/span>{\n  toggleButton.innerHTML = video.paused ? \"\u25ba\"<\/span> : \"\u275a\u275a\"<\/span>;\n}\ntoggleButton.addEventListener(\"click\"<\/span>, togglePlay);\nvideo.addEventListener(\"click\"<\/span>, togglePlay);\nvideo.addEventListener(\"play\"<\/span>, updateToggleButton);\nvideo.addEventListener(\"pause\"<\/span>, updateToggleButton);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We started by selecting the video<\/code> element, which gives access to the video attributes and methods. We then selected the button<\/code> element and added an event listener to it that triggers the togglePlay<\/code> function when clicked. The togglePlay<\/code> function executes a condition that toggles playing or pausing the video based on its current state.<\/p>\n
Next, we added a play<\/code> and pause<\/code> event listener to the video<\/code> element that calls the updateToggleButton<\/code> function, which updates based on the video\u2019s state.<\/p>\n
After that, you should be able to pause and play the video by clicking on the button or the video itself.<\/p>\n
\"GIF<\/p>\n
Implement Progress Bar<\/h3>\n
To add a progress bar that updates the video when played, update your index.html<\/code> file with the following:<\/p>\n
<h1<\/span>><\/span>Video Player<\/h1<\/span>><\/span>\n<div<\/span> class<\/span>=\"video-player\"<\/span>><\/span>\n  \/\/...\n  <div<\/span> class<\/span>=\"controls\"<\/span>><\/span>\n    <div<\/span> class<\/span>=\"progress\"<\/span>><\/span>\n      <div<\/span> class<\/span>=\"progress__filled\"<\/span>><\/span><\/div<\/span>><\/span>\n    <\/div<\/span>><\/span>\n    <button<\/span> class<\/span>=\"controls__button toggleButton\"<\/span> title<\/span>=\"Toggle Play\"<\/span>><\/span>\u25ba<\/button<\/span>><\/span>\n  <\/div<\/span>><\/span>\n<\/div<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
To make your JavaScript video player progress bar interactive, Update your script.js<\/code> file to look like this:<\/p>\n
const<\/span> video = document<\/span>.querySelector(\".video\"<\/span>);\nconst<\/span> toggleButton = document<\/span>.querySelector(\".toggleButton\"<\/span>);\nconst<\/span> progress = document<\/span>.querySelector(\".progress\"<\/span>);\nconst<\/span> progressBar = document<\/span>.querySelector(\".progress__filled\"<\/span>);\n\nfunction<\/span> togglePlay<\/span>(<\/span>) <\/span>{\n  if<\/span> (video.paused || video.ended) {\n    video.play();\n  } else<\/span> {\n    video.pause();\n  }\n}\n\nfunction<\/span> updateToggleButton<\/span>(<\/span>) <\/span>{\n  toggleButton.innerHTML = video.paused ? \"\u25ba\"<\/span> : \"\u275a \u275a\"<\/span>;\n}\n\nfunction<\/span> handleProgress<\/span>(<\/span>) <\/span>{\n  const<\/span> progressPercentage = (video.currentTime \/ video.duration) * 100<\/span>;\n  progressBar.style.flexBasis = `${progressPercentage}<\/span>%`<\/span>;\n}\n\nfunction<\/span> scrub<\/span>(e<\/span>) <\/span>{\n  const<\/span> scrubTime = (e.offsetX \/ progress.offsetWidth) * video.duration;\n  video.currentTime = scrubTime;\n}\n\ntoggleButton.addEventListener(\"click\"<\/span>, togglePlay);\nvideo.addEventListener(\"click\"<\/span>, togglePlay);\nvideo.addEventListener(\"play\"<\/span>, updateToggleButton);\nvideo.addEventListener(\"pause\"<\/span>, updateToggleButton);\n\nvideo.addEventListener(\"timeupdate\"<\/span>, handleProgress);\nprogress.addEventListener(\"click\"<\/span>, scrub);\nlet<\/span> mousedown = false<\/span>;\nprogress.addEventListener(\"mousedown\"<\/span>, () => (mousedown = true<\/span>));\nprogress.addEventListener(\"mousemove\"<\/span>, (e) => mousedown && scrub(e));\nprogress.addEventListener(\"mouseup\"<\/span>, () => (mousedown = false<\/span>));\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We selected the progress bar DOM element and added an event listener to the video<\/code> object that executes the handleProgress<\/code> function on timeupdate<\/code>. The handleProgress<\/code> function calculates the percentage of the video\u2019s current time relative to its total duration and then updates the style as the video progresses.<\/p>\n
We also added a scrub<\/code> function to scrub the video to a specific point in relation to the progress bar.<\/p>\n
Save the changes and preview the app in your browser to see the updated state of the video player.<\/p>\n
\"GIF<\/p>\n
Add Volume and Playback Rate Slider<\/h3>\n
To add custom sliders that will be used to manage the volume and playback rate states, update your index.html<\/code> file with the following:<\/p>\n
<div<\/span> class<\/span>=\"video-player\"<\/span>><\/span>\n  <video<\/span> class<\/span>=\"video\"<\/span>><\/span>\/\/...<\/video<\/span>><\/span>\n<\/div<\/span>><\/span>\n<div<\/span> class<\/span>=\"controls\"<\/span>><\/span>\n  <div<\/span> class<\/span>=\"progress\"<\/span>><\/span>\n    <div<\/span> class<\/span>=\"progress__filled\"<\/span>><\/span><\/div<\/span>><\/span>\n  <\/div<\/span>><\/span>\n  <button<\/span> class<\/span>=\"controls__button toggleButton\"<\/span> title<\/span>=\"Toggle Play\"<\/span>><\/span>\u25ba<\/button<\/span>><\/span>\n\n  \/\/ Add these\n  <input<\/span>\n    type<\/span>=\"range\"<\/span>\n    name<\/span>=\"volume\"<\/span>\n    class<\/span>=\"controls__slider\"<\/span>\n    min<\/span>=\"0\"<\/span>\n    max<\/span>=\"1\"<\/span>\n    step<\/span>=\"0.05\"<\/span>\n    value<\/span>=\"1\"<\/span>\n  \/><\/span>\n  <input<\/span>\n    type<\/span>=\"range\"<\/span>\n    name<\/span>=\"playbackRate\"<\/span>\n    class<\/span>=\"controls__slider\"<\/span>\n    min<\/span>=\"0.5\"<\/span>\n    max<\/span>=\"2\"<\/span>\n    step<\/span>=\"0.1\"<\/span>\n    value<\/span>=\"1\"<\/span>\n  \/><\/span>\n<\/div<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
We added two input<\/code> tags with a type<\/code> of range<\/code> with a predefined min<\/code> and max<\/code> value for the volume and playback rate, respectively.<\/p>\n
Now update your script.js<\/code> file with the following code to make the sliders functional:<\/p>\n
const<\/span> video = document<\/span>.querySelector(\".video\"<\/span>);\nconst<\/span> toggleButton = document<\/span>.querySelector(\".toggleButton\"<\/span>);\nconst<\/span> progress = document<\/span>.querySelector(\".progress\"<\/span>);\nconst<\/span> progressBar = document<\/span>.querySelector(\".progress__filled\"<\/span>);\n\/\/ Add this<\/span>\nconst<\/span> sliders = document<\/span>.querySelectorAll(\".contols__slider\"<\/span>);\nfunction<\/span> togglePlay<\/span>(<\/span>) <\/span>{\n  \/\/...<\/span>\n}\nfunction<\/span> updateToggleButton<\/span>(<\/span>) <\/span>{\n  \/\/...<\/span>\n}\nfunction<\/span> handleProgress<\/span>(<\/span>) <\/span>{\n  \/\/...<\/span>\n}\nfunction<\/span> scrub<\/span>(e<\/span>) <\/span>{\n  \/\/...<\/span>\n}\nfunction<\/span> handleSliderUpdate<\/span>(<\/span>) <\/span>{\n  video[this<\/span>.name] = this<\/span>.value;\n}\n\/\/...<\/span>\nsliders.forEach((slider<\/span>) =><\/span> {\n  slider.addEventListener(\"change\"<\/span>, handleSliderUpdate);\n});\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We selected the slider<\/code> elements and attached an event listener to each of them that triggers the handleSliderUpdate<\/code> function. This function uses the slider\u2019s name<\/code> and value<\/code> attributes to define the slider\u2019s state.<\/p>\n
If you preview the page in your browser, you should see the sliders.<\/p>\n
\"GIF<\/p>\n
Add Skip Controls<\/h3>\n
Add the following to your index.html<\/code> file:<\/p>\n
<div class<\/span><\/span>=\"video-player\"<\/span>>\/\/...<\/div><\/span>\n<div<\/span> class<\/span>=\"controls\"<\/span>><\/span>\n  <div<\/span> class<\/span>=\"progress\"<\/span>><\/span>\n    <div<\/span> class<\/span>=\"progress__filled\"<\/span>><\/span><\/div<\/span>><\/span>\n  <\/div<\/span>><\/span>\n  <button<\/span> class<\/span>=\"controls__button toggleButton\"<\/span> title<\/span>=\"Toggle Play\"<\/span>><\/span>\u25ba<\/button<\/span>><\/span>\n  <input<\/span> \/\/...<\/span> \/><\/span> <input<\/span> \/\/...<\/span> \/><\/span>\n\n  <!-- Add these --><\/span>\n  <button<\/span> class<\/span>=\"controls__button\"<\/span> data-skip<\/span>=\"-10\"<\/span>><\/span>\u00ab 10s<\/button<\/span>><\/span>\n  <button<\/span> class<\/span>=\"controls__button\"<\/span> data-skip<\/span>=\"25\"<\/span>><\/span>10s \u00bb<\/button<\/span>><\/span>\n<\/div<\/span>><\/span><\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We added two buttons with data attributes that will be accessed with JavaScript. To make the buttons functional, update your script.js<\/code> file with the following:<\/p>\n
\/\/...<\/span>\n\n\/\/ Add this<\/span>\nconst<\/span> skipBtns = document<\/span>.querySelectorAll(\"[data-skip]\"<\/span>);\n\/\/...<\/span>\nfunction<\/span> handleSliderUpdate<\/span>(<\/span>) <\/span>{\n  video[this<\/span>.name] = this<\/span>.value;\n}\n\n\/\/ Add this<\/span>\nfunction<\/span> handleSkip<\/span>(<\/span>) <\/span>{\n  video.currentTime += +this<\/span>.dataset.skip;\n}\n\/\/...<\/span>\n\n\/\/ Add this<\/span>\nskipBtns.forEach((btn<\/span>) =><\/span> {\n  btn.addEventListener(\"click\"<\/span>, handleSkip);\n});\n\nlet<\/span> mousedown = false<\/span>;\nprogress.addEventListener(\"click\"<\/span>, scrub);\nprogress.addEventListener(\"mousedown\"<\/span>, () => (mousedown = true<\/span>));\nprogress.addEventListener(\"mousemove\"<\/span>, (e) => mousedown && scrub(e));\nprogress.addEventListener(\"mouseup\"<\/span>, () => (mousedown = false<\/span>));\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We selected our buttons using the querySelectorAll<\/code> method and added a listener to each button that calls the handleSkip<\/code> function on click. This function then updates the video\u2019s current time based on the value specified in the data<\/code> attribute.<\/p>\n
\"GIF<\/p>\n
Add Keyboard Shortcuts<\/h3>\n
We can take advantage of the default keyboard keydown<\/code> event to customize the video player further. To add a keyboard shortcut to the application, add this to the bottom of your script.js<\/code> file.<\/p>\n
document<\/span>.addEventListener(\"keydown\"<\/span>, (e) => {\n  if<\/span> (e.code === \"Space\"<\/span>) togglePlay();\n});\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
To keep things simple, we added just a keyboard shortcut that toggles play when the space key on the keyboard is pressed. You can log the event object to the console to see other properties.<\/p>\n
Find the project here<\/a> on GitHub.<\/p>\n
Conclusion<\/h2>\n
So far, we\u2019ve looked at the default HTML5 video element and how to create custom video player controls for it, but you don\u2019t have to stop here. Discover how Cloudinary gives you a powerful suite of video tools<\/a> to help you build beautiful, expertly customized videos and more.<\/p>\n
Resources you may find helpful:<\/strong><\/p>\n
In the code above, we rendered the video><\/code> element. You can either add a video from your local computer to the src<\/code> attribute or go with the default Cloudinary<\/a> link used in the code. The HTML5 player specification currently supports three video formats, but we used multiple <source><\/code> tags to make two formats of the same video available in MP4 and WebM. In addition, we specified predefined content to be displayed for user agents that do not support the video<\/code> element.<\/p>\n