HTML Video and Audio
Text and images have always been the foundation of web content, but more than ever, video and audio are also a part of that content mix. Fortunately, we can now create standards-based video and audio players that don't require the use of plugins. Adding video and audio to a webpage is almost as easy as adding an image or formatting some text.
What you'll learn
- Video element
- Audio element
- Custom media players
Course: Introduction to jQuery --- https://teamtreehouse.com/library/introduction-to-jquery
Media Basics
In this course, we're going to spend most of our time focusing on the video and audio elements. We'll learn about a few others, but those two allow us to embed video and sound content into webpages.
- Overview of Web Media1:34
- Web Media Review3 questions
- The Video Element6:16
- The Source Element3:08
- The Video and Source Elements5 objectives
- The Audio Element4:24
- The Audio Element4 objectives
- Creating Media4:53
- Creating Media Review3 questions
Extra Credit
Try going back to the beginning and follow the instructions for working with video on a local computer.
Captioning Video
If you've ever watched a foreign film in a language you don't speak, you've probably seen text down at the bottom of the screen. That text is called captions, or subtitles. It's always a good idea to caption videos, whether it's for people with hearing impairments, people that are in a public space and don't have headphones with them, or for people that just can't quite understand what you're saying. Even if there's no spoken text in a video, it's still nice to point out sound effects and music, or even highlight the absence of sound.
- Create a Caption File7:57
- Caption Files Review3 questions
- The Track Element3:29
- The Track Element5 objectives
Extra Credit
Create your own video file and try adding captions.
Custom Media Players
Every modern browser has built in controls for audio and video, but in many cases, you may want to customize the look of these controls. This can be accomplished with a set of additional CSS and JavaScript files known as a media player.
- Overview of Video Players4:28
- Adding MediaElement.js7:33
- Review of Video Players and MediaElement.js3 questions
- Using Default Skins4:11
- Create a Custom Skin7:45
- Polishing a Custom Skin8:01
- Review of Video Skins4 questions
Extra Credit
Try experimenting with MediaElement.js and create your own custom skin.