Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Okay, so I am going to go back to Firefox and the player we are building has some pretty basic functionality. It's got Play (Music playing) and Pause. The blue bar is going to show how much of the video has been loaded. The green bar is going to show us how far through the video we are and it also has the current time of the video and then the total duration of the video. All right, so that's what we are building. And let's go over to our code and see what we are starting with. If you are following along in your exercise files, we are now in the 5-01 folder of exercise files and what I have here is basically a scaled back version of our HTML5 page.
Then inside the block I have first a test to see if a HTML5 video is supported, which is this line here and what it's basically doing is creating a video element. So it's saying document.createElement and then on that element it's checking for the canPlayType method and if that method is supported it means that HTML5 video is supported. Otherwise it's not. Then in the front of this line I also have an exclamation point which means the opposite of the outcome of the line.
So it's basically asking if HTML5 video is not supported, then it goes down and we could see that if HTML5 isn't supported, I am using jQuery first to reference our video controls, which have the ID of video_controls, and then hide. So we're hiding the controls if HTML5 video isn't supported. Because in that case Flash would be showing and it would have its own set of controls. So we don't want to also see the controls that we are building now. Now then finally I have a variable that's going to store a reference to our video tag, and so I am using the document.getElementById function and then the my_video id that we put on the video tag.
So they are going to be in-line horizontally and they will have a height of 30 pixels and then a line height of 30 pixels to enforce that font size and line the font size right in the middle of the button. Okay, so that's our starting point and now we can start creating the controls.
Get unlimited access to all courses for just $25/month.Become a member
93 Video lessons · 33657 Viewers
135 Video lessons · 67915 Viewers
79 Video lessons · 23889 Viewers
350 Video lessons · 108133 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.