You’ve already learned about the and elements, but did you know that they were designed to be used together? In fact, the two elements are absolutely wondrous when you combine them! I’m going to show off a few super-simple demos using these two elements, which I hope will prompt cool future projects from you fellow web authors. (All of these demos work in every modern browser except Internet Explorer.)
First, the basics
If you’re just starting with HTML5, you may not be familiar with the element and how to use it. Here’s a simple example that we’ll be using in the later demos:
The element contains two attributes: @controls and @loop. @controls tells the browser to give the video the standard set of video controls: play/pause, scrubber, volume, etc. @loop tells the browser to start the video over again from the beginning once it ends.
Then, inside the element, we have three child elements, each pointing to a different encoding of the same video. The browser will try each source in order and play the first one that it understands.
Read more .....