Build an HTML5 Video Player

In Chapter 1 I introduce you to the project we will build. We discuss the tools that we will be using throughout the project and the techniques we will use during the development of the project. We have a brief discussion on the users requirements and how best to get the most from the training.

In this tutorial we download our sample video that we will use throughout our project and we prepare our video in the two formats that will be used in our player. The mp4 format and the ogg format. I demonstrate a good site to acquire sample video for the training and one of the tools that I use to convert videos from an mp4 format to the ogg format needed for our player. We cover some of the fundamentals of video deployment on your website and discuss video formats across multiple browsers.

In this tutorial we begin to build our video player. We discuss the new video element in HTML5 and look at a few of the attributes that are available for that element. We setup our standard HTML5 template page. We have a discussion on the most popular video sizes for the web. We demonstrate the width, height and source attributes of the video element. We discuss the videos formats that are currently supported by the major rendering engines used in our web browsers. We demonstrate the autoplay attribute and the controls attribute. We compare the default controls that are available in the major browsers and the reasons for designing your own player.

In this tutorial we continue to build our HTML5 video player. We discuss the media element and the API that is available in the new video element. We discuss and demonstrate how we can use JavaScript to access the API to access the media elements properties. We create our play button and then create the JavaScript file that will contain all the functions for our video player. We attach the JavaScript file to our HTML file and test our new functionality.

In this chapter we continue to build our HTML5 video player. In the tutorial we clean up our HTML code and create our objects in JavaScript to make our video player much more efficient. We create the first variable objects in JavaScript, add our onload event in JavaScript, initialize our setupPlayer function and setup the references to the objects that we will be creating. We create our main.css file and the css folder. We begin to add basic styling to our player and our control bar. We add our Event Listeners for our objects which is a much more efficient way to monitor events in JavaScript. We also add our seek control to our Control Bar, we then add the seek object and the seek Event Listener to JavaScript to wrap up this tutorial.

In this chapter we continue to build our HTML5 video player. In the tutorial we add the playtime and the video duration time to the video controller. We continue to work with the properties of the video element of our video controller. The time displays, display the current time and the total duration of the video. We add the new objects to our JavaScript file and create the EventListeners for those new objects. We get into some pretty good JavaScript math functions inside this tutorial, and this knowledge will be useful in many of your own projects as you learn more and more about JavaScript.

In this chapter we continue to build our HTML5 video player control bar. We add the volume control to our video controller and we add a mute button to the controller. We add the new objects to our JavaScript file and the new Event Listeners to detect the changes to the volume settings.

In this chapter we wrap up building our controls for our HTML5 Video Player control bar. We complete the controller by adding a Full Screen display selection. I discuss and demonstrate the support of the Full Screen feature and include fall back coding for different browsers and rendering engines. I also discuss a little known feature of the video element and demonstrate how to set screen sizes on the video playback instead of using a Full Screen display.

In this chapter we style our new HTML5 Video Player. Using some of the new properties that are available in CSS3 we style the player to meet the requirements of our web application. I introduce the viewer to the Font Awesome icon set and demonstrate how we can use those icons to add graphics to our buttons and stylize the control bar of our video player.