HTML Tutorial Lesson 20: Adding Audio and Video

TwitterShare/Bookmark

[Lesson 19]<<[Contents]>>[Lesson 21]

Adding multimedia contents that include audio, video and animations to your websites can improve attractiveness , enable interactivity and increase their overall values. It benefits different kinds of websites in different ways. For example, using multimedia contents can help e-commerce sites to promote products and services, educational websites can use them to provide interactive learning environment, entertainment websites can use them to offer in-house entertainments, sports websites can use them to provide live telecast of sports events and more. In this lesson, we shall only focus on embedding video and audio in your web page, we will learn how to embed flash animations in our JavaScript Tutorial.

20.1 Embedding Video into Your Web Page

Adding video to your web pages can be a challenge as videos come in many different formats. The formats include mp4, WebM, ogg, QuickTime, avi, flv, H264, Flash video and more. We may need to convert some of the video formats into formats that can be supported by major browsers. One of the methods is to use the video element. The video element only supports only mp4, WebM and ogg. Besides, some of the browsers may not support the aforementioned video formats.The video element comprises several attributes, they are src, width, height, poster, controls, autoplay, preload, none, auto and metadata. We shall examine the meaning of the aforementioned attributes.

 

Attribute

Descriptions

src  specifies the source (path)of the video
width  specifies the width of the video player
height  specifies the height of the video player
poster  specifies an image to be displayed while waiting video to load
controls  Enable the browser to provide controls for playback
autoplay  specifies that the video starts to play automatically once loaded
preload  instructs the browser what to do with the video file when the page loads. It has three values, none , auto and metadata. The value none means the video is not loaded until the user presses the play button. The value auto means the video file is downloaded automatically. The value metadata means the browser just gather the video file information
loop  specifies that the video will be replay once ended

To embed a video file in a web page, use the following html structure:

<video  width=”320″ height=”240″ preload

controls
loop>
<source src=”video.mp4″>

Your browser does not support the video tag.
</video>

You can add  more attributes as listed in the table.

Example 20.1

<!DOCTYPE html>

<html>
<head>
<title>Embedding Video in HTML</title>
</head>
<body>
<video width=”320″ height=”240″ preload
controls
loop>
<source src=”slot2.mp4″>

Your browser does not support the video tag.
</video>
</body>
</html>

Click on Example 20.1 to view the video.

20.2 Embedding Audio in Your Web Page

To embed an audio file in your web page, you can use the audio element. The audio element comprises attributes similar to the attributes of the video element. The audio element only supports the mp3 and the ogg format.

The HTML structure of embedding an audio file is
<audio preload
controls
autoplay>

<source src=”audio.mp3″>

Your browser does not support the video tag.
</audio>

Example 20.2

<!DOCTYPE html>
<html>
<head>
<title>Embedding Audio in HTML</title>
</head>
<body>
<audio preload
controls
autoplay>

<source src=”audio.mp3″>

Your browser does not support the audio tag.
</audio>
</body>
</html>

Click on Example 20.2 to hear the audio

 

[Lesson 19]<<[Contents]>>[Lesson 21]