Creating a HTML5 Video Controller Skin
In this video we continue creating our video player. In this section we move away from the actual player to focus on the skin of our player- its time to make our controller look like its part of the player. By the end of this video we will have a full integrated CSS3 video player controller integrated into our video player.
Video Transcript
00:00All right, our next step in our video player is actually
00:02to create a video player where its components are
00:04integrated into the player itself.
00:06To do that, we're going to have to change a little bit of our HTML
00:10and basically convert our HTML element.
00:13And then let's see what I'm talking about before,
00:15instead of me talking in theory.
00:17Right now, we have a video player,
00:19and it's completely separate than our controllers.
00:21So the first thing that I want to do
00:23is I want to group all of our controllers together, which
00:25are basically currently only two controllers.
00:28So I'm going to create a div layer,
00:29and I'm going to call this, I'm just
00:31going to give it an ID of controls.
00:36I could have given notes a class name,
00:38or if we have more than one video player.
00:40But in our case, there's just always
00:42going to be one video player in our application,
00:44so we're not going to worry about creating custom solutions
00:47for multiple players in the same page.
00:50So we have our ID controls, and the next thing
00:53that I want to do is I want to group everything,
00:55my player and my controllers, together.
00:57So I'm going to create a new div layer,
00:59and I'm going to just give it the ID of player.
01:02Once I created that ID of player, I basically
01:05want to push everything inside of it,
01:06so basically everything related to our player, the player
01:09itself, and its controllers are all going
01:12to be under one element.
01:14Now that we have this one element,
01:16it's time for us to start creating some CSS.
01:19So into the CSS code, first of all,
01:21I want to start tweaking our player itself.
01:25So first of all, there's a few things
01:26I want to set to my player itself,
01:28and one of them is to define a strict definition of what
01:32is the width, and our width is 860, sorry, 640 pixels.
01:38Our height is 360 pixels.
01:43The next thing that I want to do
01:44is I want to set its position to be relative,
01:48and the reason is because the components inside of it,
01:51I want them to be absolute inside of it.
01:53So once I've created the element
01:55that I've made it a relative element,
01:58the next step for me is to go to my controls,
02:02and I could go to my controls, and now again,
02:03I'm going to set its width this time around to be 100%,
02:09because I wanted to take the full area of the video player.
02:12I want the height to be 30 pixels,
02:15because I just decided that that's the height that I want.
02:18Now here comes the interesting part, the position itself,
02:20I want it to be absolute, because I
02:22want it to be connected to the video player itself.
02:26Now I'm going to set its position,
02:27but I'm going to first set the bottom to be 0 pixels.
02:32I'm going to set the left position, oops, not height
02:35again, but the left position again to be 0 pixels.
02:39So basically flushing my element to the bottom left.
02:42So before I do anything else, I
02:44want to save everything I've done so far,
02:46and just go right into my browser,
02:49click on Refresh, and see that my components are sitting right
02:52on top of my video.
02:53So now I have a video player that's sitting right above.
02:56All right, so the next thing that I really want to do
02:58is to create some sort of an overlay that kind of like shows
03:01users that this area is the player area.
03:05So to do that, I'm just going to add a new background,
03:07and I'm going to use a new CSS3 attribute for our background.
03:12So I'm just going to type your background.
03:14And the background itself, I'm going
03:15to use a new CSS color definition, which
03:18is RGBA, which is very similar to RGB,
03:22which was red, green, blue.
03:23But now we're adding also an alpha channel.
03:26So we're basically setting my reds, my red, my green,
03:30my blue to a value between 0 and 255.
03:36And then we're setting our alpha value between 0 and 1.
03:39In our case, I'm going to set it to be 0.3.
03:42Now that I've got that set and I've saved it,
03:45I could go into my browser, and I'll
03:47see now that I have a nice overlay that is translucent
03:49so we could see the video underneath as well.
03:52The next step now that we've created this translucent
03:55background is one really where we start playing around
04:00with maybe adding a little bit of fun into this.
04:03So one thing to give it a little bit more depth
04:05and a little bit more life, how about we
04:07add another CSS3 feature, which will basically
04:10make it animate in and out whenever we roll our mouse
04:14on the video and roll our mouse out.
04:16And that's exactly what we're going to do in our next video.
04:20All right.
04:20So welcome back.
04:21And as promised, we said we're going
04:22to add a little bit more fun into the transition right now.
04:25Right now it's kind of dull.
04:27So the next step that I want to do, I want to set, first
04:29of all, what is my animation.
04:31So let's start off by first setting two different states.
04:35So I'm going to go back into my player again.
04:37I'm going to create a new player style.
04:40But this time, I'm going to focus on the hover.
04:43And in the hover state, what I want to do
04:45is I want to change the controls.
04:47And what do I want to do with the controls?
04:49I want to set the controls.
04:50First of all, let's start with opacity.
04:53So I'm going to set my opacity to be 1, basically
04:56making it visible.
04:58And in other words, what I'm going to do by default
05:00for my player is whenever my player isn't
05:03in a rollover state, I'm going to set my controls
05:05to be an opacity of 0, basically making
05:08my controls invisible.
05:10So now if I go back into my browser
05:12and I click on Refresh, we won't see the controls at all
05:16unless we rolled over the element.
05:18But that's not enough, because this animation
05:20isn't very exciting.
05:21The next step is actually to add a real animation.
05:23And to do that, we're going to have to use some CSS trickery.
05:27So the way we do this extra CSS trickery is incredibly easy.
05:32So the first step that we're going to do
05:33is we're going to go into our controls again.
05:36And in our controls, we're basically telling the controls
05:38any time an attribute inside of your changes.
05:41So basically, I'm going to set it a new,
05:44basically it's called transition.
05:46And again, this is a CSS3 property
05:49that not every browser supports, but basically all the browsers
05:52today are adopting to it.
05:54So there's a good chance that by the time
05:56that you watch this video, it might be just a standard.
05:59But it's a developing standard, again,
06:01because HTML5 is changing as we're speaking right now.
06:05Now what I could say in the transition,
06:06I could say that for the property opacity,
06:09I want to set that whenever something changes,
06:12it's going to take 0.3 seconds.
06:15Once I've done that and I save that
06:16and I'll run it in our browser, we'll
06:18see that we'll have a problem.
06:20Our problem will be is basically Safari
06:23doesn't support this property.
06:26But behind the hood, Safari is,
06:28and most other browsers in these components
06:30that are still experimental, they
06:32expose an experimental property.
06:35To gain access to this experimental property,
06:38what we need to do is I'm just going
06:40to copy what we've just created here.
06:42I'm just going to copy it a couple of times.
06:44The next thing that I want to do is I want to add the WebKit.
06:47Now WebKit is a very popular browser engine that is actually
06:52what is behind Safari and a few other browsers as well.
06:55So the WebKit, I believe, Oto Chrome,
06:57but I don't want to promise because I'm not 100% sure.
07:01There's Oto Mozilla that has their own definition.
07:05There's Opera, which has their own thing.
07:07And there's MS Microsoft that have their own thing.
07:10So we have MS Microsoft.
07:12So all those four different browser vendors
07:15have basically the experimental version of the transition.
07:19By adding these extra properties, basically adding it,
07:22and a lot of CSS3 attributes work exactly this way,
07:26by adding these extra columns, we're
07:28exposing our user to the experimental features that have
07:31not yet fully been integrated and approved
07:34by whoever is approving it.
07:36So basically right now the transition
07:37is a theoretical one that should work on all,
07:40but currently it doesn't.
07:41So we have to add all those elements,
07:43and basically we're making this future proof
07:45by adding this in advance.
07:48So I'm going to save up again and go into my browser again
07:51and click on Refresh.
07:52And this time around when I put my mouse
07:55on top of the video area, it will animate.
07:57Now if you can't see the animation
07:59because we're watching it through a video,
08:01I strongly encourage you at this state
08:02to go and download the source files at zero2geek.com
08:05if you're one of our members.
08:06And if that, just make sure that you've typed everything
08:08so you could see it in action as well
08:11if you can't see the video animation.
08:13But this video animation is a little bit boring,
08:15so I wanted to add a little bit more animation,
08:17and in the process kind of teach you
08:19another thing about these CSS transitions.
08:24So what I want to do is I want to set my default
08:26to be at minus 30, basically making it invisible,
08:30or basically making our element
08:32outside of the space of our view, basically.
08:36And then when there is a rollover,
08:38I'm just going to, let me just,
08:41so it's not on the bottom of the screen.
08:43Let me just put here a few extra enters.
08:46All right, so now I'm going to add the bottom
08:48and I'm going to reset it back to that zero PX point
08:50which we really want it to be in.
08:53Now, this is not going to animate
08:55because our animation is set to be explicitly to opacity.
09:01But if we delete the word opacity,
09:03we are basically setting a default value
09:06that would be able to work on every single variation,
09:09basically saying that any property that changes
09:11will animate now.
09:13So going back into our browser again
09:15and clicking on refresh,
09:17now that we change the position as well,
09:19now we'll see that there'll be a nice little slide,
09:21very modern type of slide that rolls over
09:23whenever you roll on the video.
09:25And that was done literally with a couple of lines of code
09:27in CSS without any need of any JavaScript.
09:31So that creates our player
09:32and makes it a lot more engaging and fun.
09:34Now, the last thing that I want to fix,
09:36which is probably hard to see,
09:37is that the video player,
09:38the buttons are going out of the border area of the video,
09:42which makes it a little bit dirty.
09:44So I'm just going to add one more thing
09:46before we wrap up this topic of adding our component inside
09:49before we continue experimenting with the video player
09:51and adding more features to it.
09:53So our next element and last thing
09:55that I want to do in our CSS
09:56is I want to go to the player itself
09:58and I want to add an overflow property
10:01and set it to be hidden.
10:02Basically saying anything that goes out of the boundaries
10:04of the 640 by 360 won't be seen.
10:07And in our scenario, what that will do
10:09is it will basically make our animation even cleaner
10:12because it will look like it's coming out
10:14of the video directly and not underneath the video.
10:17And there we go.
10:18So we created a really cool video player
10:20with a nice little overlay
10:22that only turns on whenever we roll over it.
10:24And the following next videos,
10:26we will continue in adding more functionalities
10:28to our new controller.
10:29See you then.