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.
Course info
Level
Beginner
Updated
Jan 14, 2019
Duration
5h 28m
Table of contents
Course Overview
Getting Started
Triggering Basic HTML5 Video Events
Accessing & Using HTML Video Media Properties
Customizing the Video Player with VideoJS
Triggering Basic HTML5 Audio Events
Accessing & Using HTML5 Audio Media Properties
Customizing Audio Events with HowlerJS
Conclusion
Description
Course info
Level
Beginner
Updated
Jan 14, 2019
Duration
5h 28m
Description

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.

About the author
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.

More from the author
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hey everyone. My name is Jeff Batt, and welcome to my Pluralsight course, Interactive HTML5 Video and Audio. I am the founder and trainer at Learning Dojo, and oftentimes when working with media, such as video and audio, we stick with the basics and just display the media itself, but there is so much more you can do with video and audio that goes well beyond just displaying the media. In this course, we're going to show you how to create interactive and engaging HTML5 video and audio. Some of the major topic that we'll cover include triggering HTML5 video events, including showing modals and additional content when the video is paused or ended, using video properties and methods to change a video source, trigger inner activity when the video reaches a certain point of time, and even create video hotspots. We'll also cover how to create a custom video player with Video.js, and triggering HTML5 audio events when building our custom MP3 player to control audio, using audio properties and methods to create our own audio playbar, and animate additional HTML5 content along with the audio file. We'll also cover how to get started with howler.js and how to chain files together and add audio effects, and then how we can apply this knowledge to other streaming APIs. By the end of this course, you'll learn how to go beyond static HTML5 media and learn how to create your own interactive HTML5 video and even a custom MP3 player. I hope you'll join me on this journey to learn to go beyond just showing HTML5 video and learn to make your media engaging with this Interactive HTML5 Video and Audio course, at Pluralsight.

Getting Started
Hey everyone. This is Jeff Batt with Learning Dojo, and welcome to this course on Interactive HTML5 Video and Audio. Now if you're just getting started with web development, you may already know how to embed a video or an audio file, and that's great to get started with, but there's just so much more that you can do to make your video and your audio more interactive to trigger events at different parts, when things pause, when things play, when things get to a certain point, when they end. There's just a lot that you can do to make this media a lot more interactive when building websites. In this course, we're going to talk about everything you need to do in order to make your video interactive and your audio files interactive as well. So let's go ahead and get started.

Triggering Basic HTML5 Video Events
In this module, we're going to cover how to actually trigger events in the video, so as the video starts to play, or even having the video play from a different control other than the default controls, or having the video stop, or having the video update along the timeline, or something like that and trigger some events. And so really this is where we start to make the video itself interactive and start to take advantage of just displaying the video of actually controlling the video with our code as well. So, there's a lot to cover. We'll dive right in and get started here.

Accessing & Using HTML Video Media Properties
In the last section, we really explored the different types of events that you can do, both listen for events, as well as trigger events to the video. In this section, we're going to take it further, and we're actually going to dive deeper and start building the interactive elements in our HTML5 video. So, we're going to talk about video media properties, how we can access those properties, how we can know what the current time is, how we can also know what the duration is, how we can also set different things using different methods. So we're really going to dive in, and we're going to start building the different parts of our interactive menu, our hotspots and other things to really take advantage of this and to take our HTML5 video to the next level. So let's go ahead and dive right in.

Customizing the Video Player with VideoJS
One of the frameworks that we can use when we're working with video is Video.js. Now Video.js allows us to build custom players a lot easier than having to build it completely from scratch. Now, up to this point, we've created our own custom buttons, we've created our own mute buttons and everything, but to really get down to customizing the entire player, it's actually easier if you start with a framework like Video.js instead of building everything from scratch. So in this module, we're going to learn about what Video.js is, how we can start customizing the player, how we can even use Video.js events, similar to what we were using before, and explore a little bit of that. So let's go ahead and dive in to working with Video.js.

Triggering Basic HTML5 Audio Events
In the last three modules, we've learned about everything you need to know to make a video interactive and how to add additional elements like hotspots, and menus, and other things like that. Now what we're going to learn about in the next three sections has, we're kind of shifting gears here, and we're going to be learning about audio and how to work with audio and how to do some of the same events that we've already learned with audio and how they kind of transfer over as well. But we're going to build a different example. We're going to go in and build an interactive MP3 player that changes out music and changes out an album as well, an album cover, album title. We're also going to animate the cover album to go up and down as the audio is playing as well. So, this is just going to give you some more experience with these media events, and again, it's going to be similar in some ways. We'll cover what those similarities are, and then after that we'll dive into what's different about audio. So, let's go ahead and get started here.

Accessing & Using HTML5 Audio Media Properties
Similar to what we did with the video, we learned about the events, and we learned about listening for events and triggering events, but now we're going to learn about properties and how we can actually get in to the audio properties and update the properties, and there's some different properties in audio than there are in video, so we're going to talk about different ways to change speed. We're also going to talk about different ways that you can go in and load the audio files and a couple different options like looping the audio files as well, and so that's really what we're going to cover in this section, and so let's go ahead and get started with changing the speed of the audio file.

Customizing Audio Events with HowlerJS
Now we're going to be customizing the audio events with HowlerJS. Now this is basically a JavaScript framework that allows us to take advantage of audio files, and it actually gives us an easier way to use some of these audio events and to trigger some of these audio events as well. Now there are some drawbacks that we're going to talk about, but if you're having to trigger a bunch of audio, you're having to do, okay, when something plays and when something fires off, or also when something ends as well, and you wanted to chain a couple different audio files together. Howler.js is actually a great option. We're going to cover everything that you need to know in order to get started with howler.js and some of the things that you need to do to get it set up, and we're going to explore using the framework that we had before. I'm going to clean it up a little bit, and we're going to just play around with that and explore some of the audio events with howler.js. So let's first of all talk about how to even get started with howler.js and how to connect to it.

Conclusion
Alright, so we're finally at the last module. We've gone through interactive video, we've gone through interactive audio, and now we're ready to wrap it up. There are a few things that I want to talk to you about, some of the things that you may want to explore with howler.js, as well as video.js, but there's also some frameworks, if you're going to get into video streaming or audio streaming there are some frameworks that you may want to explore, so we're going to cover what those frameworks are. We're going to explore a little bit of YouTube API and what you can do with some of that knowledge that we've gained here in this course. So we still have a lot to cover, and we're going to go ahead and cover all of that in this section, and then wrap up everything at the end.