HTML5 Video Training
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.
Ready to Level Up Your Skills?
Join thousands of learners on 02GEEK and start your journey to becoming a coding expert today!
Enroll Now for Free!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
Ready to Level Up Your Skills?
Join thousands of learners on 02GEEK and start your journey to becoming a coding expert today!
Enroll Now for Free!