Audio and Video Tags ?

Audio and video tags are used to embed audio and video elements on the webpage meaning, you can keep some audio as well as video for e.g youtube videos on the webpage as well as audio songs.

Audio Tags

There are 2 ways of emebedding audio in a webpage. Audio tag is used to create sound elements. For ex:: 

// first way
<audio controls>  
  <source src="koyal.ogg" type="audio/ogg">  
</audio>

// Second way
<audio controls src="/media/cc0-audio/t-rex-roar.mp3">
  <a href="/media/cc0-audio/t-rex-roar.mp3">
      Download audio
  </a>
</audio>

The src attribute of <source> tag inside <audio> tag is what gives the relative path of audio file either stored locally or a remote url that has the actual sound or music.
There can be multiple source tags inside audio tag. Browser will always play the first source file it understands. Now there are only 3 audio file format that browser currently supports::
  • .mp3
  • .ogg
  • .wav

Now there are multiple attributes that can be used to control the audio tag behaviour. Some of the most commonly used are:
  • autoplay : If set to true, it will automatically play audio on the webpage as soon as it is ready.
  • controls : If set to true, browser will display some control features such as volume, pause, play, playback etc.
  • loop : If set to true, it will automatically go in loop.start then end then start and so on.
  • muted : If set to true, there will be no sound from audio player.

There are many more controls on this audio tag. To read more about those, please visit the official documentation :
Audio controls
Video Tags

Video tag is used to embed videos on html using a media player. Like audio tag, a video tag will wrap a source tag and src attribute of source tag will have relative url or remote url of video file. For ex:: 

<video controls width="250">
  <source src="/media/cc0-videos/flower.webm" type="video/webm">
  <source src="/media/cc0-videos/flower.mp4" type="video/mp4">

  //additional content
  Download the
  <a href="/media/cc0-videos/flower.webm">WEBM</a>
  or
  <a href="/media/cc0-videos/flower.mp4">MP4</a>
  video.
</video>


Multiple source tags inside video tags mean browser has the option of playing first whichever video file, it supports
Now the purpose of additional content in the above snippet is, in case if browser does not support video tags at all, then it will display those contents.


The src attribute of <source> tag inside <video> tag is what gives the relative path of audio file either stored locally or a remote url that has the actual svideo.
There can be multiple source tags inside video tag. Browser will always play the first source file it understands.
Now there are multiple attributes that can be used to control the video tag behaviour. Some of the most commonly used are:
  • autoplay : If set to true, it will automatically play video on the webpage as soon as it is ready.
  • controls : If set to true, browser will display some control features such as volume, pause, play, playback etc.
  • loop : If set to true, it will automatically go in loop.start then end then start and so on.
  • muted : If set to true, there will be no sound from video player.
  • Width and Height : It defines the dimensions of video player.

There are many more controls on this audio tag. To read more about those, please visit the official documentation
Video controls



Note::
Please do not forget that <audio>, <video> tags are inline block level elements. And if you remember, these are those html tags/elements which occupies only as much space as is its content (property coming from inline elements) plus we can set its width and height and all its margins and paddings (property coming from block level elements).
More than one inline-block elements normally sit side by side on the same line. (you can change this by applying css obviously).

PrevNext