The simplest embedded (foreign) content is an image, applied to a web page with the
img element. In the olden days,
object, along with various plugins and proprietary devil dust, was used to bash and smash video and audio into submission. Although not without its (compatibility) problems, there is now a much better method for using various types of media in web pages.
<video src="kitties.mp4" controls></video>
Bam. There you go. Just like that. Simple.
This will embed a video, complete with controls, in browsers that support the HTML5
video tag and the video content type.
controls attribute is optional but if you don’t want it - if you really want to take control away from the user - you can just slap in an
<video src="kitties.mp4" autoplay></video>
This will play the video on page load, won’t display any controls, and will most likely annoy the hell out of your visitors. Of course you could, if you were kind, put in both the
Other basic attributes at your disposal include
<video src="kitties.mp4" width="300" height="200" loop muted autoplay controls></video>
You can specify a placeholder image, which will be displayed before the video is played, with the
<video src="kitties.mp4" poster="fluffy.jpg" controls></video>
The specified image will stretch or shrink to fit the dimensions of the video, regardless of the original size of the image.
So, yes, there is an opening and closing tag. Whatever could go in between them? Why, fall-back content: content that is displayed if the browser doesn’t understand the
video element. That could be a few words, a chunk of HTML, or a “really funny” and “highly original” Lolcats image.
<video src="kitties.mp4" controls> <img src="hahahaha.jpg" alt="Hilarious cat and caption saying 'soz'."> </video>
As already noted, it’s not only compatibility with the tag we need to worry about, but also compatibility with the source video itself. Luckily, more than one video source file can be offered up with the
source element along with indications of the requirements of the file in the value of the
type attribute. The browser will then take the first one it’s happy with.
<video controls> <source src="kitties.mp4" type="video/mp4; codecs='avc1, mp4a'"> <source src="kitties.webm" type="video/webm; codecs='vp8.0, vorbis'"> <p>Browser no likey HTML 5.</p> </video>
Here, a browser should figure out if it can handle the “video/mp4” MIME type and if it has the stated codec to decipher it. If it doesn’t, it should move on to the next and try again with the details set out in the second
Applying audio is just like applying video. Using the
audio tag, the structure is the same as using
video and the attributes
loop can all be used in the same way.
<audio src="meow_mix.mp3" controls> Your stupid browser doesn't support HTML 5 audio. </audio>
Alternative content can also be defined in exactly the same way as with the
A major addition to HTML5 is the
<canvas id="wittykitty" width="800" height="450"> <!-- Fall-back content here, just like with video and audio --> </canvas>
That’s it. That’s the extent of the actual HTML, at least — the power is in the scripting.