The Quick Brown Fox Rocks Audio and Video with HTML
Share your creative genius with the world! The HTML video and audio elements make it easy for us to set-up media players on a web page.
- Click here for the full video transcript
>> DAISY: Ha ha ha! Oooh. Hi foxy friends, you have to see this hilarious video I recorded today. Look at the dog! She’s so lazy! ha ha! I love the part where the quick brown fox jumps over her. Lets watch it again. This is the best video ever, I’m going to share it on my web page. With the html video tag, that’s really easy to do. All the video tag needs are src, width, and height attributes. We can also make our video player show a preview image with the poster attribute. The poster should be a path to an image. Lets see it in action. That’s fantastic! But not all browsers support the video tag, so we should put a secret message inside of the tag that will only show if the browser can’t play the video. There’s another problem with the video tag. Every browser that supports the video tag can only play certain video codecs. Codecs are a way to encode and compress digital media. There are dozens of video codecs, but the ones you should know about for web videos are H.264, vp8, and theora. We can specify multiple codecs in our video tag so that every browser is happy. Each one of these encoded videos is housed in a different type of container. Again, there are dozens of video containers, but for web videos you only need to know about mp4, webm, and ogg. You can easily convert a video to these web supported formats with a free program called avconv. Now, to specify multiple sources for your video, you need to use the source tag, rather than the src attribute. Like this. Most modern browsers will be able to play the video now. There are a few more useful boolean attributes for the video tag that I haven’t covered. The controls attribute tells the browser to show the playback controls. With these controls, I can easily restart my video and watch it over and over again. Or, I could use the loop attribute to make it repeat automatically! I could watch this forever. While I was out in the field getting video of the jumping fox, I also recorded audio of an actual fox speaking. I’m going to post this on my web page as well, so everyone can stop speculating about what the fox says. The audio tag works exactly like the video tag, the only difference being the type of files and codecs you use. For audio, we’ll need an mp3 and an ogg file.
>> DAISY (recording): Hi it’s Daisy! I’m a fox, I say thank you for watching my videos and don’t forget to subscribe!
>> DAISY: That’s what the fox really says.
The audio and video tags made it easy for us to share media on a web page, now everyone can watch the quick brown fox jump over the lazy dog!
In the next video we’ll demystify the html head tag and learn about all of the important elements that belong inside of it.