Creating a custom HTML5 video player

I'm currently at challenge 11 of Wes Bos's excellent Javascript30 course. The challenge is to build a custom video player. There isn't any explanation as to how the code, or even video functionality in the browser actually works. So here is some information which will help you complete the challenge:

HTML5 browsers ship with a built-in video player.

Invoking the player is as simple as using the video tags with the controls property like so:

<video controls></video>

That code is all it takes to display the bare video player:

HTML5 video player

Once you add a video source to it, like so:

<video controls>
  <source src="https://player.vimeo.com/external/194837908.sd.mp4?s=c350076905b78c67f74d7ee39fdb4fef01d12420&profile_id=164" type="video/mp4">
</video>

You can see the full player with controls:

full HTML5 video player

However the default player doesn't support customization. Since HTML5 comes with the Javascript Media API, it's possible to create your own set of controls to interact with a video.

This challenge includes creating custom controls such as play/pause, and skip forward/back.

As you can see on MDN, the API provides all of this functionality.

Starting the video is done with:

video['start']();

Similarly, you pause the video with:

video['pause']();

You can change where the video is playing by the currentTime. For example, to fast-forward by 10 seconds, you would do this:

video.currentTime += 10;

And rewinding 10 seconds can be done with:

video.currentTime -= 10;

 

Going Fullscreen

At the end of the tutorial, Wes suggests an extra challenge of adding a button to the controls to make the video fullscreen.

The first step is to add the button to the HTML file, index.html.

<button name="fullscreen" class="player__button player__fullscreen">[ ]</button>

I re-used the player__button classname to use the same styling as the other button, and I added the player__fullscreen class. The naming convention is in keeping with the BEM used for the rest of the code.

The next step is to grab the element, and add an eventlistener:

const fullscreen = player.querySelector('.player__fullscreen');
fullscreen.addEventListener('click', toggleFullscreen);

There is a fullscreen API which is separate from the aforementioned media API. This is presumably because the fullscreen API is not only for media, but for other content too such as games.

According to caniuse.com, the fullscreen API is partially supported on all modern desktop browsers including IE11, but is not supported on some mobile browsers such as iOS Safari and Opera Mini.

The partial support is because browsers still require the rendering engines prefix for the functionality to work.

In other words, the following will not work.

function toggleFullscreen() {
  video.requestFullscreen();
}

Instead you need to add prefixes like so:

function toggleFullscreen() {
  video.webkitRequestFullscreen();
  video.mozRequestFullScreen();
  video.msRequestFullscreen();
}

Note that Mozilla requires the 's' of screen to be capitalized.

When an element is granted the fullscreen, the fullscreen pseudo-class is activated. So you would style a fullscreen element like so:

.player:fullscreen {
  max-width: none;
  width: 100%;
}

Resources

The Media API on MDN

The Fullscreen API on MDN

The Request fullscreen method on MDN

The :fullscreen pseudo-class at MDN