JavaScript Tutorial JavaScript Examples CSS Tutorial HTML Tutorial About Us

Lesson 20: Adding Audio and Video


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 an 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 for 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>
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 preload controls load the audio player control buttons. The autoplay attribute starts playing the audio file when the web page is loaded.

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
>
<source src="audio.mp3">
Your browser does not support the audio tag.
</audio>
</body>
</html>
The Audio Output


❮ Previous Lesson Next Lesson ❯


Copyright©2008 Dr.Liew Voon Kiong. All rights reserved |Contact|Privacy Policy