- Further exploration
Viewers: in countries Watching now:
- Understanding the differences in media formats
- Preloading, autoplaying, and looping in HTML5
- Setting a video's width and height attributes
- Displaying subtitles and captions
- Generating embed code with an embed code builder
- Encoding files using HandBrake, Firefogg, and VLC
- Creating a load progress bar
- Recognizing Android and iOS issues
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.
There are currently no FAQs about HTML5: Video and Audio in Depth.