OnTargetHTML5 Logo Image

OnTargetHTML5 Tutorial Sets

Your source for web development training

Pay Securely with PayPal

Build an HTML5 Video Player

Priced at: ... $12.00   Holiday Pricing: $6.00

Build your Own HTML5 Video Player.
Approximately to 3 hours of High Definition videos on Building a Customized HTML5 Video PLayer

This 9 Chapter Video Tutorial is approximately 3 hours in length. Recorded in High Definition format with a screen resolution of 1280 x 720. This tutorial takes you step by step through the process of building your own HTML5 Video player. Utilizing the web development technologies of HTML5, CSS3 and JavaScript I take you step by step through the process of building your player and then customizing the appearance. I introduce you to creating objects in JavaScript and how to attach events to those objects to control the player features.

We go indepth into the new properties of the video element API and how you can use those properties to build your own controls and customize those controls to your site appearance.

As with all my courses this course also includes all the slide presentations that I use throughout the training. The presentations are included in PDF format so that you can follow along with the discussions and make notes on the slides as we work through the training. I also include all the exercise files for each lesson.

Once you purchase the course, when updates and changes are made to the course material you will automatically receive an email notification of the changes and a download link for the free updates. I do this with all my courses. Make certain we have an accurate email address to take advantage of this offer.

Take your training with you. The downloads are included in mp4 format and can be played on all hand held devices that support mp4 videos.

A complete Chapter Listing with a preview video is listed below.

Length: 2:55:46

Level: Beginner

In the tutorial series we begin by demonstrating what we plan to build in the series, the steps we will follow and the core knowledge and tools that will be needed to complete the exercises. This tutorial is written at a beginner level.

Some of the Topics Covered in thie Tutorial

  • Understanding the NEW video element.
  • Working with the attributes of the video element.
  • Creating a generic video player.
  • Converting your videos to the correct format.
  • An introduction to Easy HTML5.
  • Working with different browsers.
  • Video Formats for HTML5.
  • Working with the video element properties at a programming level.
  • Creating Objects in JavaScript.
  • Using Event Listeners in JavaScript.
  • Customizing your Video Player.
  • ... And Much More ...

Building an HTML5 Video Player.

Chapter 1 - An Introduction to our Project

Subject Area: Length
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. 5:30

Chapter 2 - Preparing our Videos

Subject Area: Length
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. 13:11

Chapter 3 - Building our Player - Part 1

Subject Area: Length
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. 14:28

Chapter 4 - Building our Player - Part 2

Subject Area: Length
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. 10:39

Chapter 5 - Building our Player - Part 3

Subject Area: Length
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. 27:07

Chapter 6 - Building our Player - Part 4

Subject Area: Length
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. 18:17

Chapter 7 - Building our Player - Part 5

Subject Area: Length
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. 18:00

Chapter 8 - Building our Player - Part 6

Subject Area: Length
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. 18:45

Chapter 9 - Styling our Player

Subject Area: Length
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. 44:04

Make payments with PayPal - it's fast, free, and secure!

Accepts all payments

Accepts credit cards whether you have PayPal account or not. PayPal acts as the gateway to get your purchase completed quickly. It is fast, convenient and secure.

PayPal is trusted by over 173 million users around the world. This gives you peace of mind throughout the purchasing process knowing your payment will be made quickly and your information is secure.

Pay Securely with PayPal