Playing Video on the Web

Depending on the HTML element you use, audio can be played

Inline audio

When audio is included in a webpage or as part of the webpage, it is called inline audio.

You can add inline audio to a webpage by using the <bgsound> element or the <img> element.

If you plan to use inline audio in a web application, you need to be clear about one thing: many people are very annoyed by inline audio. Also, note that some users may have already disabled the inline audio option in their browsers.

Our suggestion is to include inline audio only where the user is likely to want to hear sound. For example, after the user opens a page, click on a link to listen to a recording.

Using helper (Plug-In, plugin)

Helper applications are programs that can be started by a browser to "help" the browser play audio. Helper applications are also known as plugins (Plug-Ins).

Helper applications can be started by using the <embed> element, or the <applet> element and <object> element.

One of the great advantages of using helper applications is that they allow users to control certain settings of the player.

Most helper applications allow manual or programmatic control of volume settings and playback functions, such as replay, pause, stop, and play.

Using the <bgsound> element

Internet Explorer supports the <bgsound> element.

The function of this element is to provide background sound for the web page:

<bgsound src="beatles.mid" />

The above code snippet sets a MIDI file as background music for the web page.

Try It Yourself (TIY)

You can find the attribute list of the <bgsound> element in the last section of this tutorial.

Note:The <bgsound> element is not a standard HTML or XHTML element. Only Internet Explorer supports this element.

Using the <img> element

Internet Explorer supports the dynsrc attribute in the <img> element.

The element is used to embed multimedia elements in a web page:

<img dynsrc="horse.wav" />

The above code snippet sets an embedded WAVE file for the web page.

Try It Yourself (TIY)

Note:The dynsrc attribute is not a standard HTML or XHTML element. Only Internet Explorer supports this attribute.

Using the <embed> element

Internet Explorer and Netscape both support the <embed> element.

The element is used to embed multimedia elements in a web page:

<embed src="beatles.mid" />

The above code snippet sets an embedded MIDI file for the web page.

Try It Yourself (TIY)

You can find the attribute list of the <embed> element in the last section of this tutorial.

Note:Internet Explorer and Netscape both support the <embed> element, but it is not a standard HTML or XHTML element. The World Wide Web Consortium (W3C) recommends using the <object> element to replace it.

Use the <object> element

Both Internet Explorer and Netscape support the <object> element.

The element is used to embed multimedia elements in a web page:

<object
classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
<param name="FileName" value="liar.wav" />
</object>

The above code snippet embeds a WAVE file in the web page.

Try It Yourself (TIY)

You can find the list of attributes for the <object> element in the last section of this tutorial.

Using Hyperlinks

If a web page contains a hyperlink to a media file, most browsers will use an 'assistant program' to play the file:

<a href="beatles.mid">
Click here to play the Beatles
</a>

The above code snippet sets a link to a MIDI file. If the user clicks on the link, the browser will launch an assistant program (such as Windows Media Player) to play the MIDI file.

Try It Yourself (TIY)