Try the Complete HTML Course Free!

How to Add Video and Audio Files to a Webpage Using HTML5

/ / HTML, Latest

For the complete tutorial, click here










About Video and Audio Files:

You can add video and audio files to your webpage by either providing links to the files or embedding them directly into your HTML pages.  Before the adoption of HTML5, there was no standard for showing video across multiple browsers.  Videos could only be played with a “plug-in” like Adobe Flash, however different browsers used different plug-ins.  HTML5 offers a new element, the <video> element, that does not require a plug-in to play video files.  The <video> element is supported by most of the standard browsers used today.

The same can be said for audio files with the new <audio> element.  Most standard browsers now support the <audio> element.  Negating the need for a plug-in with most browsers.

Even though modern browsers support the <video> and <audio> elements it is a good idea to have fallback measures when users are trying to view your webpage from older browsers.  The standard fallback for audio and video files is using the <embed> element in conjunction with the <audio> and <video> elements.

The easiest way to display video, without having to worry about browser support, is to use YouTube to view your video.  You can upload your videos to YouTube and use that as your source to display your videos.  The benefit to this is twofold, you save space on your server and YouTube uses a non-browser specific standard to display your videos.


Linking to Video and Audio Files

The most basic way to provide audio and video files to your visitors is to link directly to the files.  When clicked, the file will open and play in a separate window.  Just as with other links, be sure to upload the video or audio file to your Web server to avoid broken links.  The tag used to define the link is the anchor tag and takes the format of <a href=…>, where the “a” defines it as an anchor tag and the HREF attribute defines the “Hyperlink Reference” or action that will occur when the user selects the link.  The <a href=…> tag is followed by the text that will be displayed to the user for their selection.  The display text, and the anchor tag, are then terminated with the </a> end tag.  If you choose to use this method, your visitor must be using a browser that supports the linked file type.

Start Tag: <a>
End Tag: </a>
Attributes: href=
Example: <a href=“”>Our Commercial</a> This tag will create a text link to the specified .mp3 audio file.
Result: Our Commercial This link appears as underlined text, indicating a clickable link.


Adding Video

There are a few steps necessary when adding or embedding video into your webpage.  In addition to the <video> element, you will need to supply a <source> element.  The <source> element in conjunction with the SRC attribute, tells your webpage what video file to display.  You must also tell your browser the type of file you are linking with the TYPE attribute.  There are currently three major video file types supported. They are: MP4, WebM and Ogg. The MP4 format is the most widely supported format with the major browsers (Internet Explorer, Chrome, Firefox and Safari).  It may be a good idea to add multiple file types to your HTML coding to ensure compatibility across many browser platforms. You will be able to tell what type of file you are working with by checking either the extension at the end of your file, or looking at your file properties.  You can use multiple <source> elements within your <video>…</video> element to link different video files and types.  The browser your user is implementing will use the first recognized format of your video file.

It is important to include the HEIGHT and WIDTH attributes in the start tag <video>.  When you include these attributes, the space for the video is reserved when your page is loading.  If you don’t include the height and width of your video, your page layout will change while the video is loading.

The CONTROL attribute is used to add controls (ex. play, pause, volume) to your video. There is no value attached to this attribute as it will just add basic controls to your video file.

To increase the likelihood of your video playing in your users’ browser, you can combine the <video> element with the <embed> element.  The <embed> element creates a container for any video file you choose to link to your webpage.

It is a good idea to include some text between the <video>…</video> tags to describe your video file or to let the user know their browser does not support the <video> tag.  Any text you enter will only be displayed if the <video> element is not supported by their browser.

Start Tag: <video>
End Tag: </video>
Attributes: height= Sets height of video.
  width= Sets width of video.
  controls Adds video controls play, pause, volume, etc. to your file.
Supporting Start Tag: <source> No end tag.
Attributes: src= Defines link to video file.
  type= Tells browser what type of file you are using.
Supporting Start Tag: <embed> No end tag.
Example: <video width=“350″ height=“260″ controls>   

<source src=“samplevideo.mp4″ type=”video/mp4″>

<source src=“samplevideo.ogg” type=”video/ogg”>

<embed src=“samplevideo.avi” width=”320″ height=”240″>
Sample Video.  Your browser does not support this file type.


Result: Displays a video, with play, pause and volume controls, in a space 240 pixels high by 320 pixels wide.  If the browser does not support the video the text you entered will be displayed:   

Sample Video. Your browser does not support this file type.