Lesson 21: Video and Audio
HTML5 embraces media elements in a big way, so this lesson will walk you how to use video and audio.
Videos
We've all gotten used to using YouTube or Vimeo (or others) to embed videos into our website. This is because there has been no general video player that people can all use. A plug-in like Flash, for example, had to be installed (with the right version) and still introduced some major problems, like poor usability and taking up major bandwidth
HTML5 introduced a new <video> element that means you don't need YouTube but also doesn't require a plug-in! [Warning: This is not true for all browsers. Internet Explorer 9+ requires Microsoft Media Player and Safari requires Quicktime to be installed.]
The coding is fairly simple to add a video to your web page.
Video
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support HTML5 videos.
</video>
The height and width let the browser know how much space it needs to display the video. The controls attribute adds the Play/Pause controls we've all come to expect. The src needs to point to the location of your movie file (and don't forget to upload that file too when you move files onto the internet using the FTP client).
There are three types of videos supported: MP4, WebM, and Ogg. At this time, no one type of video is supported by all browsers. MP4 formats are not supported on FireFox 3.6+ or Opera 10.6+. Ogg is supported on those browsers, but not on Internet Explorer 9+ or Safari 5+. Right now, you've got all your bases covered if you have both MP4 and Ogg OR MP4 and WebM formats.
Both MP4 and OGG sources listed
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support HTML5 videos.
</video>
Putting text inside the video element will cover the situation where the browser simply does not support the video for whatever reason.
If you have a video available, try it out yourself. Note: This code will only work if you're running this from the internet. If your page is still local, then you need to do this another way.
Local movie when page is local
<input type="file" accept="video"/>
<video controls autoplay></video>
This code lets you choose a video to play from your hard drive. Remember, it's not for use once you have your website up and running on the internet.
Audio
Like video, audio files had no standard way of being played other than by using a plug-in.
Now HTML5 has an <audio> element that you can use instead. You can play formats MP3, Wav, and Ogg, although, like video, none is supported on every browser. Use Wav+MP3 to cover all your bases.
Music
<audio controls>
<source src="music.wav" type="audio/wav">
<source src="music.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
The controls attribute adds play/pause controls. As with video, you can add multiple source formats and the browser will play the first one it is compatible with.
Although we've shown you the basics of video and audio, there are a lot of things that can go wrong. If you're having trouble, you can always use our forums to troubleshoot.
| Related topics in the | Replies | Views |
|---|---|---|
| No related topics yet | ||