KRobbins.com

Create a Simple HTML Video Player

3/24/2025

Computer display showing my video player.

In a previous article, Using the <video> Element in HTML5, we looked at adding a poster image to a video and adding closed captioning to a video, by using the <video> element in pure, simple HTML5. One of the things we learned, was that HTML can handle videos when using the latest browsers and even adds a few controls to help us watch the video.

But, what if you wanted to create your own video player with custom controls of your own design? Here we will take a look at creating a simple HTML video player with HTML, giving it our own design with CSS and adding functionality to the buttons using JavaScript. As we have learned before; HTML, CSS and JavaScript are the three building blocks of the Internet's web pages.

In this article we will do the following:

  1. Remove the default video controls.
  2. Add necessary container elements in HTML and give them id or class designations.
  3. Use CSS to style the video container elements.
  4. Write JavaScript for Play, Pause, Stop, Re-wind, and Mute button's functionality.

To begin, you can use the first HTML file from my previous article, cited above. It has code for the poster. We will leave out the closed captioning for this exercise. A little more complicated. Here is a link to that starting file:
video-poster.html
After opening, save it as simple-video-player.html in your project folder. The video and links should work if you are using the same folder structure.

Open your newsimple-video-player.html file and starting from the top down, what are some of the element contents that need to be changed for this new file? Start with the <title> and <header> contents. There may be other items you want to change to reflect this current project. You will see some other changes in my example.

Next we need to remove the automatically generated controls, which are added by the browser when we simply added the controls attribute to the video element - right after the poster attribute. Remove it now. Save and open the file in your browser and you will see it no longer has any functionality. The controls are gone. Now we'll make our own!

In order to make the necessary changes, the HTML, CSS and JavaScript all have to communicate. This is accomplished by either giving each of the HTML elements an id or assigning the elements to a class. This can be done using these attributes with almost any element in HTML.

 An id is an attribute that gives an HTML element a unique identification. Only one element can have that id value within that HTML document. CSS and JavaScript can style and manipulate that element by calling the unique ID.
 A class attribute is used to point to a class name in CSS. A class can add many types of styles to an HTML element. Multiple elements can be in the same class.

Preparation

I have started making the changes to the HTML document for my custom video player. I will explain the changes below. Notice the addition of empty CSS and JavaScript sections where I will add style and functionality later. Here is what my web page looks like so far. 

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8" />
    <title>Simple Video Player</title>
<!--Start: inline style sheet-->
    <style type="text/css">

    </style>
<!--End: inline style sheet-->
</head>
<body>
    <header>
        <h1>Simple Video Player</h1>
        <p>Date: 3/25/2025</p>
        <p>Creating a simple video player using HTML5, CSS, and JavaScript</p>
    </header>
    <!--Begin video player-->
    <section id="player">
        <p>Advertising the UNIVAC computer, produced by Remington Rand. <br />
        This commercial aired on the CBS Television Network on 2/5/1956.</p>
        <video id="myVideo" poster="poster-univac.png">
            <source src="../video/UNIVAC2_512kb.mp4" type="video/mp4">
            Your browser does not support HTML5 video.
        </video><br />
        <div id="controls">

        </div>
    </section>
    <!--End video player-->
    <footer>
        <h4>&copy; <a href="http://www.krobbins.com">krobbins.com</a> 2025</h4>
    </footer>
    <!--Begin script for player functions-->
    <script type="text/javascript">

    </script>
    <!--End script for player functions-->
</body>
</html>

Our file is getting longer now as we add more elements. There are no numbered lines as you should be getting more familiar with reading the code and understanding the structure of HTML, CSS and JavaScript. In my descriptions, I will describe areas and tags within the HTML. So lets take a look at what has been done so far.

  • Within the <head> tags we changed the <title> and added an area for the future internal CSS.
  • Within the <header> tags I updated the document information.
  • Directly below that, I added a comment and a <section> with an id of "player" which will be the container for the video.
  • Our <video> element only has the addition of an id of "myVideo."
  • Below that we have <div> with an id of "controls" which is where our <buttons> will be located.
  • We end the player with the closing </section>.
  • Lastly, we will need an area for our JavaScript. This goes at the end just before the closing </body> element. I have commented the area to help make it easy to see.

Now we should have a file that looks something like my code example above. It is important to have all the id and class designations setup for the tags we will be using or we will have problems later making our video player work properly or at all. Going forward, my code examples will show only the section or area we are working in.

Adding <button> elements

Now we will add the following buttons: Play, Pause, Stop, Re-wind, and Mute/Un-mute. Not too complicated, but will give us a good little programming project. Only the mute/un-mute button needs an id. This is because it is the only button we will change the contents of the element from Mute to Un-mute as necessary. We will add that later with Java Script. The other buttons will only call their respective JavaScript function when clicked.

 A function in programming, can also be called: a procedure, method, subroutine and other names in other programming languages.
 A function definition: A block of code, that has a name, performs a specific task and can be re-used many times. That's a simple definition.
 A JavaScript function is executed when it is called, in our case when the button is pressed. 

<div id="controls">
    <button title="Play" onclick="playVideo()">Play</button>
    <button title="Pause" onclick="pauseVideo()">Pause</button>
    <button title="Stop" onclick="stopVideo()">Stop</button>
    <button title="Re-start" onclick="rewindVideo()">Rewind</button>
    <button title="Mute/Un-mute" onclick="muteVideo()" id="mute"><span class="speaker">Mute</span></button>
</div>
  • Here we have added five <button> elements to our controls <div>.
  • Each element has a title and onclick attributes.
  • The title is basically what the button does and also produces the Tool Tip.
    • Tool Tip: A text pop-up box produced by hovering over an HTML element.
  • onclick is an attribute available to the button element in HTML, which allows the button to call a function from JavaScript.
    • The format for this is onclick followed by an equals sign and the name of the function which includes opening and closing parenthesis.
    • The parenthesis may have contents or be empty. The contents are called parameters.
  • The contents of the <button> element is the text that shows on the button: Play, Pause, Stop, Rewind, Mute/Un-mute.

If you have added this HTML and open the file in a browser, the buttons will appear and have the default button look, but nothing will be functional and you should see something like this:
Screen shot of what the webpage should look like so far.

Adding JavaScript

Now let's make these buttons work by adding the JavaScript. If you are using a sophisticated editor, such as Visual Studio, VS Code or one of the many other programming editors, you may have what Microsoft calls IntelliSense. It is also called auto-complete, code complete, suggest and other names. As you type, the software brings up a list of suggestions of possibilities. Usually these are only the code that will be possible to use in the given situation. This can is some cases help you learn coding and certainly help speed up the writing process.

Here is the JavaScript we will need to make our buttons function properly. This will go in between the <script> tags at the bottom file, just before the </body> tag. 

<script type="text/javascript">
    function playVideo() {
        myVideo.play();
    }
    function pauseVideo() {
        myVideo.pause();
    }
    function stopVideo() {
        myVideo.load();
    }
    function rewindVideo() {
        myVideo.currentTime = 0;
    }
    function muteVideo() {
        if (myVideo.muted) {
            myVideo.muted = false;
            document.getElementById("mute").innerHTML = "Mute";
        } else {
            myVideo.muted = true;
            document.getElementById("mute").innerHTML = "Un-mute";
        }
    } false;
</script>
  • Here we have five functions, the names of which are being called by the 5 buttons in our HTML file.
    • The first three functions, are structured the same and each contain another function. Let's look at one:
          javascript function      |          How it works
______________________________________________________________________________
    function playVideo() {   | Creates a function called playVideo
        myVideo.play();      | Sends a function called "play" to the 
    }                        | element with the id=myVideo.
    • The body of the function is enclosed in curly braces { } in the format shown above.
  • The forth function (rewind), simply sets the currentTime property of a media element (such as video or audio) to 0 or the beginning.
  • In last function involves an if statement. The Mute/Un-mute button element's default content is "Mute". When the button is pressed to mute the speaker, the sound stops and the button face must then say "Un-mute" and when pressed again the opposite must happen.
  • Notice that the if statement uses a function called getElementById("mute") to get the mute button's id and change the name on the button from Mute to Un-mute.

We should now have a web page that looks exactly the same as the picture above but should now be functional. All the buttons should work properly, if we have written our JavaScript correctly. If one or more of your buttons does not ' work correctly, start by making sure each HTML element has the proper id and the JavaScript is using it. Also look for any unwanted spaces and misspellings in your code. Make sure your video player is working properly before moving on the next section.

Styling with CSS

As we have previously learned, HTML structures content for a web page a page. CSS controls design and layout. JavaScript adds interactivity and functionality. These three are the basic building blocks of the Internet. Since CSS is for designing and layout, we will not turn to the look and feel of our video player.

When CSS is added to an element, it is done by adding a style property and its desired value to the element and is called Inline CSS. Example:

<div style="background-color: powderblue">
When the CSS is added to the HTML page, it is added within the <style> element in the <head> area of the document and is called Internal or Embedded CSS.
When the CSS is in a separate text file (filename.css), it is referenced by a link to the file in the <head> area and is called External CSS.

Below is the beginning of our CSS content within the <style> element. We have not added any styling yet. The fun part is adding the style properties and values and seeing the design we get. 

<style type="text/css">
   #controls {
   }
   button {
   }
   #player {
   }
   .speaker {
   }       
</style>
Starting from the top, all the styles go within the <style> element. In this project we are using the three methods of selecting elements in HTML as explained below.
  • When using the element's id in CSS it is called an id Selector and is preceded by a #. Since the element's id is unique, the style is only applied to that element.
  • When using an element itself (such as button in CSS it is called a Element Selector and, in this case selects every <button> in the document to add styling to.
  • Using period as in .speaker, creates a Class. Any element in that Class will receive that styling. The element becomes a member of the class by adding the class property with the value equal to the class name. A Class can have unlimited elements in it.
    Notice in the HTML above, the Mute/un-mute button has already been added to the speaker class.

Now comes the fun! Let's start styling our player with a design of our own. One fun thing you can try is drawing a video player and then trying to make your styles look like your drawing. As mentioned before, it really helps if you have a sophisticated code editor like, VS Code or VS Studio. There are many others out there. I use those two Microsoft products because I have been using them for years and I am very familiar with them. Plus, they are free.

The advantage when using software like Visual Studio (VS) is the feature that Microsoft calls IntelliSense. It is called other names in various software, but it is basically an auto-complete or code completion ability. As you are typing VS recognizes where you are and give you a list of options suitable for that situation.

After looking at the CSS above, let's start with #controls, which is an ID Selector. If you look at the HTML, you will see the element with the id of "controls" is a <div> element that contains the all the <button> elements. Styling this button container will give us added control and more styling possibilities.

Here are just a few properties and values I have started with. Remember, my stuff is just an example. You can try styling in any way you want to. I'll explain what I have done below the code. For CSS, I will use a "plain English" explanation. 

#controls {
    text-align: center;
    background-color: lightblue;
    border-top: 5px solid navy;
    border-radius: 0px 0px 14px 14px;
    max-width: 100%;
}
  • The contents of the div are center aligned
  • The background color is light blue.
  • The top border is 5 pixels thick, and is solid, navy colored.
  • The border has a radius on the bottom left and right only.
  • The maximum width is all of whatever container it is in.

You can experiment with these properties and values or come up with your own. One of the books I like for a quick reference to CSS is:O'Reilly's CSS Pocket Reference I have used O'Reilly's pocket references for years and find them very handy. They are available for CSS, HTML, JavaScript, Python and many other languages and disciplines.

Next, we'll take a look at the actual buttons and give them a styled look. For the buttons we are using an Element Selector. These styles will only be applied to any <button> element. 

button {          
    color: white;
    font: bold small arial;
    background-color: steelblue;
    margin: 2px 10px;
}
  • The color of the text is white.
  • The font is bold, small and arial
  • The background is steelblue
  • The upper and lower margin is 2 pixels and the left and right margin is 10 pixels.

Next is #player which is again an ID selector. 

#player {
    max-width: 100%;
    width: 480px;
    text-align: center;
    border: 5px solid navy;
    border-radius: 20px;
}
  • The maximum width is all of its container.
  • The actual width (without violating the above condition) is 480 pixels.
  • The contents are in the center.
  • The border is 5 pixels thick with a solid navy line.
  • The border radius is 20 pixels on all four corners.

If you have been following along with everything we have covered, you should have a video player that is something like my example here:
Simple Video Player.

Adding Icons

You can be creative with CSS by changing the colors, line widths, margins, radius and adding ideas of your own. You could see if you can add another button for some extra functionality, like closed captions. Another possibility is adding icons on the buttons, instead of text. I'll give you a hint and see if you can take it from there.

Hint: 

<button title="Play" onclick="playVideo()">&#9654;</button>

Notice the code added for the face of the button. When used it renders a button like this:

There are several places to get icons for your HTML. The icon above comes from the Unicode Consortium. But, honestly it is sometimes hard to find what you are looking for there. It may be easier to use W3Schools, which has a very complete set of icons.

Here is my example video player, using icons:
simple-video-player-icons.html

Something to keep in mind if you are using icons. Most icon references may give either the decimal, hexadecimal or both icon identifier numbers. So when adding to your HTML, the decimal number uses the format in my example above. But using the hexadecimal identifier uses this format:

<button title="Play" onclick="playVideo()">&#x25B6</button>

You may find an this article I wrote on icons helpful:
Using Icons in HTML


Thanks for viewing. Please check out my other articles on education and technology. I welcome any comments!


Comments »

© 2020 - KRobbins.com

If attribution for any resource used on this or any page on krobbins.com is incorrect or missing, please check the about page. If there is still an error, please contact me to correct it.