vspkumari's blog

How to insert Audio and Video in HTML :

vspkumari's photo
vspkumari
·

2 min read

How to insert Audio and Video in HTML :

The HTML5 <audio> and <video> tags make it simple to add media to a website. You need to set src attribute to identify the media source and include a controls attribute so the user can play and pause the media.

Embedding Video

Here is the simplest form of embedding a video file in your webpage −

<video src = "foo.mp4"  width = "300" height = "200" controls>
   Your browser does not support the <video> element.   
</video>

The current HTML5 draft specification does not specify which video formats browsers should support in the video tag. But most commonly used video formats are −

  • Ogg − Ogg files with Theodora video codec and Vorbis audio codec.

  • mpeg4 − MPEG4 files with H.264 video codec and AAC audio codec.

You can use <source> tag to specify media along with media type and many other attributes. A video element allows multiple source elements and browser will use the first recognized format −

<!DOCTYPE HTML>

<html>
   <body>

      <video  width = "300" height = "200" controls autoplay>
         <source src = "/html5/foo.ogg" type ="video/ogg" />
         <source src = "/html5/foo.mp4" type = "video/mp4" />
         Your browser does not support the <video> element.
      </video>

   </body>
</html>

Video Attribute Specification

The HTML5 video tag can have a number of attributes to control the look and feel and various functionalities of the control −

Sr.No.Attribute & Description
1autoplay
2autobuffer
3controls
4height
5loop
6preload
7poster
8src
9width

Embedding Audio

HTML5 supports <audio> tag which is used to embed sound content in an HTML or XHTML document as follows.

<audio src = "foo.wav" controls autoplay>
   Your browser does not support the <audio> element.   
</audio>

The current HTML5 draft specification does not specify which audio formats browsers should support in the audio tag. But most commonly used audio formats are ogg, mp3 and wav.

You can use <source&ggt; tag to specify media along with media type and many other attributes. An audio element allows multiple source elements and browser will use the first recognized format −

EXAMPLE:

<!DOCTYPE HTML>

<html>
   <body>

      <audio controls autoplay>
         <source src = "/html5/audio.ogg" type = "audio/ogg" />
         <source src = "/html5/audio.wav" type = "audio/wav" />
         Your browser does not support the <audio> element.
      </audio>

   </body>
</html>
HTML5