HTML5 Video Development (H300)

HTML5 video has become the video standard in displaying video on the web, whether it is being viewed by a desktop browser, tablet or mobile device. Students will learn the different video formats and codecs that are supported (.mp4, .webm, .ogg) by each modern browser.

When web visitors use an older "legacy" browser (IE 7 and 8), you will be taught the latest fall-back (polyfill) techniques to display alternative Adobe Flash video or alternative media.

This class will teach students how to incorporate the latest HTML5 Video standards to not only display video on the web, but also how to integrate and convert video to work with latest Responsive Design layouts.

Students will learn step-by-step how use JavaScript libraries to create some imaginative web applications using video as the web site's focal point.

Applicable Job Roles: Web developer, web designer, front-end developer, UX designer, webmaster, web admin

Who should attend: This course is for anybody who wants to understand how video can be used on the web using HTML5 web standards (including responsive web design) for browser and mobile devices.

Objectives for this class are:

Understanding of HTML5 Video elements
Review of video essentials: bitrate, mime type, codecs and streaming
How to customize and style video player controls with CSS and JavaScript/jQuery
How HTML5 video can be implemented in Responsive Web design
Support video for iPad/iPhone and Android devices
Controlling video playback functionality with JavaScript/jQuery
Review of common video libraries that play HTML5 video
Fallback options for older browsers (use of polyfill with Adobe Flash)
Creating web applications using video
Testing of HTML5 video on browser and mobile devices

Outline

Week 1: Introducing HTML5 Video

History of video on the web
HTML5 Video browser support
HTML5 Video Media Elements and Global Attributes review
Review of video essentials: mime types, codec, bitrate, and steaming
Conversion tools
HTML5 Video embedding

Week 2: Integrating Video with Responsive Design

Responsive Design Overview
Media Queries Overview
Adapting Video to be Responsive
Responsive Video techniques:
- Using CSS
- Using a JavaScript library
- Differences between hosting services (Youtube, Vimeo, etc.) and standalone video embedding.
Conditional loading: Loading different video for mobile
Polyfills
- Modernizr Overview
Testing: Simulator and Emulators

Week 3: HTML5 JavaScript API

Using jQuery and JavaScript to access Video object
- Controlling pre-loading and playback
- Player controls (play, stop, pause)
- Binding event handlers
- Video playlists
Review of fallback options
Mobile (iPad/iPhone and Android) considerations

Week 4: Video Player libraries

Review of libraries
- Video.js
- MediaElement.js
- JW Player
Customizing functionality
Creating web applications with HTML5 video
- Integrating with other libraries
- As background component
- Customized playback control

Prerequisites

Understanding of HTML and CSS and JavaScript is required.
Knowledge of jQuery is helpful, but not required (code is explained in lessons)

Requirements

Software: Aside from a text editor, such as Windows Notepad or Mac OS TextEdit, there are no required software applications to complete this course. Students may use a web development tool (i.e. Adobe Dreamweaver, Microsoft Expression Web, etc,) but students are responsible for troubleshooting and support.
You must have a web host account to post your assignments
- eClasses.org Recommends the following hosting providers

Books:

No Textbook Required

Additional information:

Your place in the course is confirmed by your payment. Introductory courses are intended for students with no experience in the subject matter and are seeking beginner level training.

Refund Policy: Please read our Terms and Refund Policy before registering for this course.

Additional Cost: Book and software might be required for the course. Read the Requirements and Book section for more information. Course fee does not include the book and software cost .

How eClasses Work:Instructors post lectures (text-based, no video or audio), reading selections, and hands-on assignments once a week in the online classroom. Students can discuss the assignments with the instructor and amongst themselves in the classroom area. This format has no set meeting time, which allows students to attend class at a time most convenient to them, yet still provides logically organized communication between class participants. Students can apply for the completion certificate after finishing the class.

Price:

$200.00

Item No.:

H300

Instructor:

Frank Stepanski

Open Courses: No other sessions are scheduled for this course. You can add to your wish list and you will be notified when other sessions are scheduled.

Testimonials

Instructor's Profile

Frank Stepanski has over 10 years experience in web development. Frank has a Masters in Software Engineering and has worked with technologies such as ASP.NET, SQL Server, PHP, MySQL, as well as HTML5, CSS and JavaScript.

He has also taught web programming classes over 10 years at a local community college.

Before you register for this class, please read the Outline, Prerequisites, Requirements, Books, and Refund Policy sections carefully.

Testimonials

Rating

"The HTML5 Video Development class was a fantastic experience and has proven to be a valuable addition to my understanding and use of videos. The instructor was knowledgeable, and I would highly recommend this class to anyone who wants to gain a solid understanding of how to use HTML5’s video capabilities.

Phillip Thomas" - Phillip Thomas
"My boss allowed me to use her profile to take this course for my employee development. Professor Stepanski was an excellent instructor. I learned a lot on HTML5 Video Development and I know that it will be very useful for me and my co-workers in the future for a better job performance tool.

Monekia Felder-Robinson" - Jennifer Canup