Creating Interactive HTML5 Video
4.6 (15 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
845 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Creating Interactive HTML5 Video to your Wishlist.

Add to Wishlist

Creating Interactive HTML5 Video

Make your video come to life by adding interactive HTML5 videos over your videos.
4.6 (15 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
845 students enrolled
Created by Jeff Batt
Last updated 6/2016
English
Curiosity Sale
Current price: $10 Original price: $25 Discount: 60% off
30-Day Money-Back Guarantee
Includes:
  • 2 hours on-demand video
  • 2 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Embed HTML5
  • Create clickable hotspots over video
  • Trigger events during certain parts of the video
  • Jump to different parts of the video based on users input
View Curriculum
Requirements
  • Basic understanding of HTML
  • Basic understanding of CSS
  • Basic understanding of JavaScript
  • Basic understanding of jQuery
Description

In this course, you will learn how to go beyond just static HTML video and allow your users to interact with your HTML videos. We will take ordinary HTML video and add interactive elements, such as clickable areas on the video that, when clicked on, could allow the user to explore concepts in more depth as well as adding timed triggers that happen at certain points of the video.. Then, you will also learn how to branch out to different parts of the video depending on the user’s choice. Finally, you will see how this interaction is viewable on all mobile and desktop devices.

Concepts Taught:

  • HTML5 Video
  • CSS
  • JavaScript
  • jQuery
  • Skeleton CSS
  • Featherlight Lighboxes
Who is the target audience?
  • Coders who understand the basics
  • NOT for newbies to code
Students Who Viewed This Course Also Viewed
Curriculum For This Course
23 Lectures
02:01:55
+
Introduction and Example
2 Lectures 08:25
+
Creating Your Video Page Layout
7 Lectures 43:47

Basic Video Page Layout
09:55

Stylizing the Video Layout
04:58

Creating a Video Description Area
06:14

Stylizing the Clickable Boxes
09:50

Overview of Featherlight JS
02:44

Creating the Featherlight Areas
05:50
+
Adding Interactivity to Your Video
13 Lectures 01:05:54
Setting up Click Events on the Clickable Areas
05:39

Play/Pause Video Function
09:13

Running a Function After Lightbox Closes
04:24

Creating the Users Choice
05:38

Setting Up Some Variables
04:13

Variable Fix
00:56

Video Loaded and Time Update Functions
07:02

Triggering the Choice in Your Video Timeline
04:34

Halfway and Finished Video Events
03:55

Choice Handling Event
03:28

Jumping to a Certain Point in the Video
05:28

Stopping the Video
04:06

Updating the Time Labels
07:18
+
Conclusion
1 Lecture 03:49
Final Thoughts
03:49
About the Instructor
Jeff Batt
4.5 Average rating
362 Reviews
10,223 Students
7 Courses
Head Trainer at Learning Dojo

Jeff has 10+ years experience in the digital learning and media industry. Currently he CEO and Head Trainer/Sensei at Learning Dojo, a company dedicated to training you to become a software ninja in a variety of software eLearning and web related. Jeff has also been the Product Development Manager for eLearning Brothers with responsibility for the design, development, and management over their world-class digital learning templates library building templates in Storyline, Studio ’13, Captivate, Adobe Edge Animate, Lectora, HTML5, Flash and more. Prior to his work at eLearning Brothers, Jeff was the Design & Professional Services Manager for CallidusCloud’s online eLearning authoring tool Litmos Author. Jeff is a regular conference speaker and industry leader regarding eLearning technologies such as TinCan API (xAPI), Articulate Storyline, Adobe Edge Animate, Captivate, Camtasia, HTML 5, and Flash.