SmartCodingTips

Audio & Video in HTML5

HTML5 introduced built-in support for audio and video, allowing developers to embed media content without relying on external plugins like Flash. These elements come with native controls and can be styled or customized using JavaScript and CSS.

The <audio> Element

The <audio> tag is used to embed sound content in a web page. It supports multiple source formats to ensure compatibility across browsers. 


<audio controls>
  <source src="audio-file.mp3" type="audio/mpeg">
  <source src="audio-file.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

The <video> Element

The <video> tag embeds a video player with playback options like play, pause, and volume control. It also supports multiple formats. 


<video width="320" height="240" controls>
  <source src="video-file.mp4" type="video/mp4">
  <source src="video-file.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Additional Tags

  • <source> – Specifies alternative media files for <audio> and <video>.
  • <track> – Used for specifying subtitles, captions, or other text tracks in videos.
← Previous: New Input Types Next: Canvas →