Learn HTML 5 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>