Video Player Project- Creating The UI

Open the project folder

In our starter files, open the index.html page from this lessons folder:

05.Time-To-Practice > 01-Video-player

This section contains projects to put into practice what you have already learned, alomg with some new tricks along the way. Starting off with a video player project. HTML has a native video player and controls, but we can also remove these and create a fully custom player, using some properties, methods, and events which we have available.

Over in the starter files, we have some files:

video.mp4: mp4 video file for us to use in the project, you can use your own if you have one.
index.html: Empty file which just links to a script file and our CSS.
script.js: Empty file to work in.
styles.css: Some styling so we can focus on JavaScript.

First into the index.html. If you have used the native HTML video element before, or even the audio element, this will be familiar. If not, it is just a <video> wrapper where we provide the source to our video files:

<body>
  <video>
    <source src="video.mp4" type="video/mp4" />
    <p>Your browser doesn't support HTML5 video.</p>
  </video>
  <script src="script.js"></script>
</body>

If we try this in the browser, nothing currently works. This is because to add video controls such as play and pause, we need to either make them ourselves, or use the standard built in controls.

To use the built in controls, we add the controls attribute:

<video controls>
  <source src="video.mp4" type="video/mp4" />
  <p>Your browser doesn't support HTML5 video.</p>
</video>

This works well but we can also create our own.

remove the controls attribute we just tested.

`video` events

The HTML video element has events we can use such as play, pause, ended, progress, and volumechange to name a few. We can listen out for any of these events to occur and run some code.

The `HTMLMediaElement`

For this, the video element inherits methods from a parent API called HTMLMediaElement. This media element has properties and methods such as the ability to play and pause, to change the volume, and to see how long the media has been playing for.

Why inherit properties and methods?

But why not just attach these extra methods and properties directly to the video element?

This happens because elements such as a div would not need access to these extra methods, which is why they are inherited in only the elements which use it. Also, having these separate means other elements can make use of them. Other elements such as <audio> can use the same methods and properties such as play and pause.

Also, this HTMLMediaElement is part of a collection of lots of different web API’s and interfaces which gives us the power to lots of amazing things in the browser. Including the DOM API, and this is one we have used a lot in the last section to interact with our DOM elements.

Some other examples include:

Canvas API: This enables drawing functions so we can draw in the browser, and we will look at this one later.
Geolocation API: Allows users can share their location.
HTML Drag and Drop: Move elements on the page and drop them in certain locations.

Creating our custom media controls

We are going to use these media properties and methods soon, but first we need to create some custom HTML controls to activate them:

<!-- index.html -->
<video>
  <source src="video.mp4" type="video/mp4" />
  <p>Your browser doesn't support HTML5 video.</p>
</video>
<section class="controls">
  <progress value="0"></progress>
  <div>
    <button id="play" class="round">play</button>
    <button id="pause" class="round">pause</button>
  </div>
  <div class="align">
    <span>vol -</span>
    <input id="volume" type="range" min="0" max="1" step="0.1" />
    <span>vol +</span>
  </div>
  <div>
    <button class="speed">x0.5</button>
    <button class="speed">x1</button>
    <button class="speed">x1.5</button>
    <button class="speed">x2</button>
  </div>
  <div>
    <button id="back" class="skip">&#10226;</button>
    <button id="forward" class="skip">&#10227;</button>
  </div>
</section>

In the script.js we need to access these control buttons and the video player element:

// script.js
const video = document.querySelector('video');
const progress = document.querySelector('progress');
const play = document.querySelector('#play');
const pause = document.querySelector('#pause');
const volume = document.querySelector('#volume');
// multiple speed elements, use querySelectorAll:
const speed = document.querySelectorAll('.speed');
const back = document.querySelector('#back');
const forward = document.querySelector('#forward');

This now gives us access to our video player element and controls. Next, we can start to add events, properties, and methods to control our video player.

Mini Challenge: Build a Dark Mode Button Video Player Project- Video Events, Properties & Methods