02GEEK: Learn howto create an HTML5 video player

Courses Archive Books

Get Free Access

Converting Video for HTML5 Video Player

Enough of the boring intros and getting started with html5 its time to get our hands real dirty and its actually really fun. in this video we break into the world of html5 video. we start by the formats that are supported in html5 and then move into creating our first html5 video player. We start off with a video that is already formated at h.264 a perfect format for many web needs(and the ideal flash encoded video to date) but yet it doesnt' work on every browsers we explore why and see how we can fix that. we then use the tool mirovideoconverter an opensoruce tool that will make our life easier so we can expore our video to all the formats we need. by the end of this video you will know everything you need to know about how to create a html5 video player with all the posible configurations. how fun is that. but this topic is not over the hype over html5 video wasn't only about the capability to display video but it runs deeper and in the next chapter we will look into the counter part the JavaScript part of controlling the video.

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