ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...
Html audio video
1. HTML AUDIO & VIDEO
SESSION 11
Aptech Computer Education
Presented by Muhammad Ehtisham Siddiqui (BSCS)
1
2. Objectives
Describe the need for multimedia in HTML5
List the supported media types in HTML5
Explain the audio elements in HTML5
Explain the video elements in HTML5
Explain the accessibility of audio and video
elements
Describe how to deal with non-supporting
browsers
Presented by Muhammad Ehtisham Siddiqui (BSCS)
2
3. Introduction
Presented by Muhammad Ehtisham Siddiqui
(BSCS)
3
Traditionally, Web browsers were capable of handling only graphics
and text
Suppose, if a user had to play some video, then, a distinct program,
plug-in, or an ActiveX control had to be installed.
Earlier, Web designers and Web developers used to set up Web
pages to play audio and video on the Web using Adobe Flash
player.
Multimedia is a combination of various elements such as video,
graphics, sound, and text. A common way of inserting a multimedia
content on Web pages is by embedding a video or audio file in the
Web page.
4. Multimedia Support
Presented by Muhammad Ehtisham Siddiqui
(BSCS)
4
Container Video Codec Audio Codec
Mp4 H.264 AAC
Ogg Theora Vorbis
WebM VP8 Vorbis
5. Audio in HTML5
Presented by Muhammad Ehtisham Siddiqui
(BSCS)
5
The <audio> element will help the developer to embed music on the Web site and
allow the user to listen to music.
The <audio> element is one of the best features in HTML5.
This feature allows the user to enable a native audio file within the Web browser.
The <audio> tag specifies the audio file to be used in the HTML document.
The src attribute is used to link to the audio file.
6. Audio in HTML5(Code)
Presented by Muhammad Ehtisham Siddiqui
(BSCS)
6
<!DOCTYPE html>
<html>
<head>
<title>audio element</title>
</head>
<body>
<audio src=”d:sourcecodesaudio.mp3” controls autoplay loop>
html5 audio not supported
</audio>
</body>
</html>
7. Audio Attributes in HTML5
Presented by Muhammad Ehtisham Siddiqui
(BSCS)
7
Audio
Attributes
Description
autoplay This attribute identifies whether to start the audio or not once
the object is loaded. The attribute accepts a boolean value
which when specified will automatically start playing the
audio as soon as possible without stopping
autobuffer This attribute starts the buffering automatically
controls This attribute identifies the audio playback controls that
should be displayed such as resume, pause, play, and
volume buttons
preload This attribute identifies whether the audio has to be loaded
when the page loads and is ready to execute. This preload
attribute is ignored if autoplay exists
src This attribute specifies the location or the URL of the audio
file that has to be embedded
8. Videos in HTML 5
Presented by Muhammad Ehtisham Siddiqui
(BSCS)
8
The <video> element is a new feature added in HTML5.
The user can use the <video> element for embedding the video content on the Web
page.
The easiest way to specify the video is by using the src attribute which give the URL
of the video file to be used.
Suppose, if the browser does not support the <video> element then the content
between the start tag and end tag is displayed on the browser.
9. Videos in HTML 5 (Code)
Presented by Muhammad Ehtisham Siddiqui
(BSCS)
9
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<video src=”D:Source codesmovie.mp4”>
Your browser does not support the video.
</video>
</body>
</html>
10. Videos in HTML 5 (Code 2)
Presented by Muhammad Ehtisham Siddiqui
(BSCS)
10
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<video height=“200” width=“200” controls>
<source src=”myvideo.mp4” type=”video/mp4”>
<source src=”myvideo.webm” type=”video/webm”>
<track src=”eng.vtt” label=”English p subtitles” kind=”subtitles” srclang=”en” >
</video>
</body>
</html>
11. HTML5 Video Attributes
Presented by Muhammad Ehtisham Siddiqui
(BSCS)
11
Attribute Description
autoplay Specifies that the browser will start playing the video as
soon as it is ready
muted Allows to mute the video initially, if this attribute is existing
controls Allows displaying the controls of the video, if the attribute
exists
loop Specifies that the browser should repeat playing the
existing video once more if the loop attribute exists and
accepts a boolean value
preload Specifies whether the video should be loaded or not when
the page is loaded
src Specifies the location of the video file to be embedded