Interactive HTML5 Video and Audio
Go beyond just static HTML5 media. In this course, you will learn how to trigger video and audio events, methods, and even build custom video and audio players to engage users more and allow them to interact with your media.
What you'll learn
Displaying audio and video on the web is only scratching the surface with what you can do using HTML5 media. Using simple media events and methods, you can trigger user interaction at different points in your media file. In this course, Interactive HTML5 Video and Audio you will gain the ability to work with HTML5 video and audio events, methods, and custom players. First, you will learn how to trigger and listen for specific video events to prompt the user to interact with your content. Next, you will discover how you can access video properties and even adjust some of those properties using methods to manipulate and adjust your media. Then, you will see how to build a custom video player to get a specific video player style. Finally, you will explore how to build your own custom MP3 player. When you're finished with this course, you will have the skills and knowledge you need to go beyond just showing video and audio on a web page and have your web page respond and adapt with your video or audio files.
Table of contents
- Module Introduction 1m
- Exploring Video Events 2m
- Triggering Events on Page Loaded 3m
- Firing Code When Video Is Ready 3m
- Learning to Use Play, Pause, and Ended Events 6m
- Creating Custom Player Controls 6m
- Triggering a Modal When Video Is Paused 4m
- Trigging an Event When Video Is Seeking 5m
- Trigging Events When Time Updates 5m
- Module Introduction 1m
- Adjusting the Video Volume 8m
- Creating a Video Menu 12m
- Jumping to an Exact Point in the Video 4m
- Changing the Video Source 5m
- Showing Questions at Certain Points 6m
- Figuring Out Halfway with Duration of Video 3m
- Creating a Hotspot Over the Video 6m
- Animating Content Alongside Video 8m
- Module Introduction 1m
- Firing Code When Audio Is Ready 2m
- Stylizing the Audio Player 9m
- Creating the Audio Playbar 9m
- Revisiting Play, Pause, and Ended Events for Audio 4m
- Reading List of Audio Files from JSON Object 9m
- Creating Custom Audio Controls 9m
- Trigger an Event When Audio Time Updates 6m
- Updating the Playbar 6m
- Module Introduction 1m
- Connecting HowlerJS 3m
- Reasons for HowlerJS 3m
- Exploring Howler Methods (Play, Pause) 5m
- Exploring Various Howler Options 2m
- Exploring Howler Events (Onload, Onplay, Onend) 4m
- Controlling Multiple Audio Files at Once 4m
- Exploring Howler Effects (Fades, Seek, and Rate) 7m
- Chaining Audio Together 2m
- Triggering Events on Time Update 1m
- Play Portions of the Audio 4m
About the author
Jeff has 10+ years experience in the digital learning and media industry. Currently he is Founder and Head Trainer/Sensei at Learning Dojo, a company dedicated to training you to become a software ninja in a variety of eLearning, web, and mobile related software applications. Jeff is also the Digital Learning Development Manager for The Church of Jesus Christ of Latter-day Saints, producing online training for the Church world wide. Jeff has also been the Product Development Manager for eLearnin... more