Lecture-12 : MEDIA IN HTML

INSERTING AUDIO

The audio element has five attributes associated with it:

src: Sets or returns the current source of the audio element.

Autobuffer: Automatically start buffering (loading) the audio, so it’s first loaded if you start playing. Currently Chrome and Safari ignore this attribute, so the audio is being buffered on page load.

Autoplay: Sets or returns whether the audio should start playing as soon as it is loaded.

Loop: Sets or returns whether the audio should start over again when finished.

Controls: Sets or returns whether the audio should display controls (like play/pause etc.)

If you don’t have the controls attribute, the audio player disappears. Use the audio element to specify an audio file, as shown in the given example :-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Tutorial</title>
</head>
<body>
<h1>Audio Example</h1>
<audio controls>
<source src=”audio1.mp3” type=”audio/mpeg”>
<source src=”audio1.ogg” type=”audio/ogg”>
Your browser does not support Audio tag.
</audio>
</body>
</html>


Output:-


INSERTING VIDEO

You do not have to specify the width and height of the video element. If you do not set the video element with its respective attributes, the movie will play to the default values of the video file itself.

A video file might have its own poster, which is a static image that represents the video as a whole, similar to a thumbnail. However, you can override this poster by using the poster attribute. The poster image can be any file type the browser supports (e.g., GIF, JPEG, or PNG).

Width and Height: define the dimensions of the playback-window, if not set the browser tries to use the dimensions from the video.

Loop: Sets or returns whether the video should start over again when finished.

Autoplay: Sets or returns whether the video should start playing as soon as it is loaded

Controls: Sets or returns whether the video should display controls (like play/pause etc.)

Autobuffer: Automatically start buffering (loading) the video, so it’s first loaded if you start playing. Currently Chrome and Safari ignore this attribute, so the video is being buffered on page load.

Poster: Here you can supply an image which will be displayed while the movie is not loaded yet.

Use the HTML5 video element, as shown in the Example:-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 video tag</title>
</head>
<body>
<h1>Video Example</h1>
<video width="320" height="240" loop="loop" poster="html5video.jpg" autobuffer="autobuffer" controls autoplay>
<source src="html5video.ogg" type="video/ogg">
<source src="html5video.mp4" type="video/mp4">
Your Browser does not support Video Tag.
</video>
</body>
</html>


Output:-