HTML5 Audio and Video Tags

HTML5 Audio and Video Tags: With the passage of time, different types of media, including video and audio, are becoming more and more important. Today, the web is not only a place to access content and images, but has also become a go-to resource to watch live videos, conduct video conference and video calls, and so on.

Unlike older versions of HTML, which required the help of various plug-ins to play audio and video, HTML 5 adds standard ways of plugging media. HTML 5 has eliminated many problems associated with playing media in earlier versions, such as finding the right plug-ins for your browser to run a specific kind of media.

HTML5 Audio and Video Tags – Embedding Media from another Web Page

It is ridiculously easy to add any kind of content from other web pages to your page, and the same is true for media (both audio and video). For that matter, we use an iframe <iframe> element. Just like <a> and <img> elements, we use an src tribute inside the <iframe> element in order to specify the URL of the video we want to play. Take a look at the following example:

Embedding Media from another Web page Example

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> Adding Media</title>
</head>
<body>
<h1>How to add Media to a webpage</h1>
<p> Video on Twinkle Twinkle Little Star<br>
<iframe src="https://www.youtube.com/embed/yCjJyiqpAuU" width="560" height="315" frame
border="0" allowfullscreen></iframe>
</body>
</html>

Embedding Media from another Web page Example Output

html5 video tag exampleIn this example,

  • The src attribute specifies the source or URL of the video you are trying to put in.
  • The width and height attributes specify the width and height of the video frame.
  • The allowfullscreen attribute gives viewers the option to watch videos on full screen.

You do not need to write all the boring code in HTML 5 to get your video. You can simply copy the entire code and paste it into your HTML 5 editor.

For instance, open any YouTube video you want to embed, go to the Share tab below the title, and then click Embed. You will get a code very similar to the one used in the above example. Just copy the code and put it where you want your video to play.

Embedding video and audio from your computer

So far, we have learned how to embed video and audio from other web pages. Now we are going to see how to embed video and audio residing somewhere in your local computer. The process is somewhat the same, as you just have to replace the <iframe> element with the <video> and <audio> elements for embedding video and audio, respectively.

Embedding Video in HTML5

In the case of a video, you will use the following markup.

Embedding Video Example

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> Adding Media</title>
</head>
<body>
<h1>How to add Media to a webpage</h1>
<p> Video on Twinkle Twinkle Little Star<br>
<video src="rhymes.mp4" width="560" height="315" controls></video>
</body>
</html>

Embedding HTML5 Video Example Output

Embedding HTML5 Video Example Output

We have added a video in HTML5 without using any annoying plug-ins. Note that there is also a control attribute in the markup which allows you to add controls like play, pause, and volume. Though the only value for this attribute is controls, no value is strictly required in HTML5.

Other attributes you can use in place of controls are:

  • autoplay: plays the video as soon as it is loaded
  • loop: replays the video automatically from the start once it has finished
  • preload: tells the browser whether it should preload video or not. You don’t need this attribute if the controls attribute is already there.

It is always better to add width and height; otherwise, there can be rendering issues, depending on the browser you are using.

Embedding Audio in HTML5

While embedding audio files from your local computer, you will replace the video <video> element with the audio <audio>. The remaining markup will remain more or less the same.

Embedding Audio Example

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> Adding Media</title>
</head>
<body>
<h1>How to add Media to a webpage</h1>
<p> The "Firefiles" from You Can Unlearn
Guitar<br>
<audio src="audio.mp3" controls autoplay></
audio>
</body>
</html>

Embedding HTML5 Audio Example Output

Embedding HTML5 Audio Example Output

Media Formats in HTML 5

It is worth mentioning some of the most commonly used audio and video formats in HTML 5. We recommend using these formats, rather than others, to avoid rendering and incorrect loading issues.

Major Audio Formats

The following are major audio formats you can use in HTML 5.

  • Ogg Vorbis (.ogg)
  • MP3 (.mp3)
  • Waveform Audio File Format, or WAVE
  • (.wav)

Major Video Formats

The following are some of the major video formats which HTML 5 recognizes.

  • Ogg Theora (.ogg)
  • MP4 (.mp4)
  • VP8/9 (.webm)