Courses Archive Books

Get Free Access

HTML5 Video Training

Learn to create custom controls in HTML5. Learn everything you need to know to get started with Video in HTML5 and JavaScript.

Duration: 01:56:13

Created with

Ben Fhala

Ben Fhala is the creative force and founder behind 02geek, a pioneering platform dedicated to making web development accessible to everyone. With over 18 years of experience in the industry, Ben has a deep passion for teaching and a knack for breaking down complex concepts into easy-to-understand lessons.

HTML5 Video Training Overview

What you'll learn

One of the many really amazing features in the new HTML5 world we live in is video. The world is video , its true mainly cat videos but still videos. If you didn't have a chance yet to take our moving up to HTML5 video then take it now. In this 2 hours course on HTML5 Video we start you up with knowing all you need to know to create basic HTML5 video players without JavaScript and then we move in to JavaScript to learn how to create your own custom video player skins and controllers.

The new Video Tag

In this video we will jump right into HTML5's new video tag. By the end of this video you will know everything you need to know to add a new HTML5 video and get it to work on all modern browsers.

Converting Video for HTML5 Video Player

a video on html5 video were we explore the players capabilities.

Creating a Button

Stage one in our video controller is to have a button that can control it. By the end of this video we will have a controller capable of controlling our video.

HTML5 onload

It's a good idea not to start interacting with elements on our page until the page has loaded. In this video we explore one option of waiting.

HTML5 Video Play and Pause API

It's time we dig into the JavaScript Video API. By the end of this video we will have a video player that has a custom pause/play button created using the JavaScript HTML5 Video API.

Introducing the HTML5 classList

It's time for us to take a peak at one of the really fun ways to interact with CSS. So let's jump in and see how to work with classlist.

HTML5 Video Play and Pause Event

Learn how to listen to when something changes in our video such as when the video starts or stops to play

Moving the CSS and JS to External Files

It's time to clean up our video controller and as such we are going to move out our files into separate files to ease control and modularity.

Creating a HTML5 Video Controller Skin

By the end of this video we will have a full integrated CSS3 video player controller integrated into our video player.

Muting HTML5 Video API with JavaScript

Learn to use the JavaScript video API to mute the volume when ever you feel like it.

Changing HTML5 Video volume dynamically

xactly what you really want to do is put up the volume.

HTML5 video volume animation

Now that you know how to control volume in html5 its time to learn how to create dynamic fun animations to our volume to make our video player polished and ready for the real world.

Enough Playing, let's create a seeker!

We know how to control volume, pause, play and even listen in on the video when something changes in it. It's time for us to create a proper seeker. Jump in it will be fun.

Our seeker Sucks, let's make it better

In this video we will listen in to our video and as it changes positions we will update our seeker. Making our seeker a two way perfection.

Listening in on the duration change event

Our seeker doesn't work if we try to click on it as soon as our app loads. Why is that? and how can we fix it? the short answer is using the duration change event. Let's jump in and see why and how it