HTML5 Video Development

HTML5 Video Development online course
Course Name

HTML5 Video Development

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
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
  • Understanding of HTML and CSS and JavaScript is required.
  • Knowledge of jQuery is helpful, but not required (code is explained in lessons)
  • 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
Course Books
No Textbook Required
Course Price
  • Member Price: $100 US
  • Non-Member Price: $200.00 US
[Register Now]

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 migh be required for the course. Read the Requirements and Book section for more information. Course fee does not include the book and software cost .

Start Date: Click on the Register Now button to process to the registration page. You will see the start date of the class on that page.

How eClasses Work:Instructors post lectures, 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. Web Study certificate is also available. Click on the Certificates link on the top navigation bar for more information.


Register Now

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

4 Web Study Certificates

 Valid XHTML 1.0!  Valid CSS1!  Level Triple-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0

Dreamweaver Online CourseBuilding Data-Driven Websites Course
Adobe Flash Adv. Online Course Flash Design Course Adobe Fireworks Online Course
Flash Level 2 CourseWeb Videography CourseContracting Your Services - Online Course
Web Design Legal Issues CourseContracting Your Services - Online CourseApache Admin Course
Blog Content Writing Course - OnlineWeb Content Writing Skills CourseDNS Administration Course
UNIX Administration Course - OnlineGoogle Web Analyics CourseWordpress Theme Design Course
Wordpress Content Management CourseDrupal Beginner CourseProject Management Training Course
Joomla Training CourseJoomla 2 Course OlineLogo Design Concepts Course
Website Project Management CourseWeb Design Legal Issues CourseWeb Design Legal Issues Course
Search Engine Optimization CourseWebsite Promotion and Marketing Course - OnlineEmail Marketing Course Strategies
Social media Marketing CourseSocial media Marketing CourseAccessible Web Design Course
Web Design Concepts Training CourseWeb Design Course Training OnlineAdobe Muse Course
Mobile UI Design Course TrainingWeb Design Concepts Training CourseWeb Design Concepts Training Course
Adobe Photoshop CoursePhotoshop for Web Graphics CoursePhotoshop Retouching Course
Adobe InDesign CourseAdobe Illustrator Online CourseIllustrator Design 2 - Online Course
Adobe Edge Animate CourseHTML Beginners CourseHTML Level 2 Course
Mobile Web Design Online CourseHTML5 Online CourseCascading Style Sheets Online Course
Cascading Style Sheets Level 2 Online TrainingCSS 2.1 in Depth Online CourseCSS3 Online Course
CSS3 Online CourseCSS3 Online CourseMobile Web Design Online Course
XHTML Online Course Web TrainingDatabase Design Online Web CourseSQL Using Access Online Course
SQL Using MySQL Online Web TrainingMySQL Online CourseSQL Server Online Course
Programming Concepts Online Web TrainingPHP Online CourseShopping Cart using PHP and MySQL Online Web Training
PHP Online CourseJSP Web TrainingColdFusion Web Development Online Class
ColdFusion Web Development Online Web Training Level 2JavaScript for Beginners Online Web TrainingJavaScript Level 2 Online Course
AJAX Programming Online Web Training CoursejQuery Web Programming Online CourseJava for Non-Programmers Web Training Course
Beginning Java Programming Online CourseJava Programming Web TrainingPerl Beginner Course
C# Beginning Programming Online CourseBeginning ASP.NET Web Development Online CourseVisual Basic.Net Programming Online Course
ASP Programming for Beginners Online CourseASP Programming Second Level Online CourseASP Web Development with C# Programming Online Course
PHP Online CourseJavaScript for Beginners Online Web TrainingWeb Security Training Online Course
XML Web Programming Online CourseXML Programming for the Web Online CourseAndroid Application Development Online Course
Game Programming and Production Online CourseGame Development and Design Web TrainingProgramming Flash Games Online Course
Video Game Programming using C++ Online CourseGame Programming on Windows using C++ Online Course3D Video Game Programming using DirectX Online Course