Using HTML5 Video and Audio Tags
It is important to make websites more attractive and interactive to users. One of the ways to do that is to add video and audio files. HTML5 introduced a lot of cool new features and tags, and some of the new tags are
How to Use Video and Audio Tags
<video> tags have very similar formatting:
<audio src="myfile.mp3" /> <audio src="myfile.mp3"></audio> <video src="myfile.mp4" /> <video src="myfile.mp4"></video>
The tags are self-closing, so both formats would be considered correct. It’s really easy, isn’t it? The new tags themselves are not so complicated. However, video codecs are complex and create a lot of issues. Long story short, each browsers support different codecs, and because of this, it would be wise to add different video formats for maximum compatibility between browsers. The formats would then change to these:
<audio controls> <source src="myfile.mp3" type="video/mp3" /> <source src="myfile.ogg" type="video/ogg" /> </audio> <video controls> <source src="myfile.mp4" type="video/mp4" /> <source src="myfile.webm" type="video/webm" /> <source src="myfile.ogv" type="video/ogg" /> </video>
In addition to these attributes, you could set
height on the
New Attributes for Video and Audio Tags
There are some new attributes that could be used on
<video> tags. I will list some below, and these attributes could be used for both audio and video:
- preload – This attribute controls when the video or audio file will download. It is especially useful for large files.
- loop – Using this attribute will make the audio or video file start over when it ends. It is a Boolean attribute, so all you need to do is include the word
- autoplay – Also a Boolean attribute, this attribute determines whether the video will start on page load or not.
It is important to include video and audio files in your website. I hope this article was helpful in getting you started with HTML5 audio and video tags. If you would like to learn more about getting started with HTML5 in general, check out this article: Getting started with HTML5