Scribd
Upload
20 views16 pages

INSY214 Chapter5

Chapter 5 covers the integration of audio and video files into webpages using HTML5, highlighting the use of <audio> and <video> elements that eliminate the need for plug-ins. It explains how to link, embed, and control audio and video playback, including attributes for customization. Additionally, it discusses using YouTube for video display through iframe embedding for ease of use.

Uploaded by

CASTRO ODHIAMBO OTIENO
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
20 views16 pages

INSY214 Chapter5

Chapter 5 covers the integration of audio and video files into webpages using HTML5, highlighting the use of <audio> and <video> elements that eliminate the need for plug-ins. It explains how to link, embed, and control audio and video playback, including attributes for customization. Additionally, it discusses using YouTube for video display through iframe embedding for ease of use.

Uploaded by

CASTRO ODHIAMBO OTIENO
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 16

Audio & Video

CHAPTER 5

LOGO
Contents

6.1 About Audio and Video Files


6.2 Linking to Audio and Video Files
6.3 Adding Audio
6.4 Adding Video
6.5 HTML <embed> Tag
6.6 Using Youtube to Display Video

2
D. Gichuki
6.1 About Audio and Video Files

 Audio and video files can be added to the webpages by


either providing links to the files or by embedding them
directly into the HTML pages.
 Before the adoption of HTML5, there was no standard for
playing audios or showing videos across multiple browsers.
They could only be played with a plug-in.
 HTML5 offers new elements, the <audio> and <video>,
that do not require a plug-in to play video or audio files.
 Most standard browsers used today are supporting both
<audio> and <video> elements.

3
D. Gichuki
6.2 Linkig to Audio and Video Files

 The most basic way to provide audio and video files to your
visitors is to directly link to the related files.
 When clicked, the file will open and play in a separeate
window.
 Just same as with other links, be sure to upload the video or
audio file to your Web server to avoid broken links.

Example
<!DOCTYPE html>
<html>
<body>

<a href="http://www.mywebsite.com/song.mp3"> My Song </a>

</body>
</html>

4
D. Gichuki
6.3 Adding Audio

 There are a few steps necessary when adding or


embedding audio into your webpage.
 In addition to the <audio> element, you will need to supply
a <source> element.
 The <source> element in conjuction with the SRC attribute,
tells your webpage what audio file to play.
 You must also tell your browser the type of file you are
linking with the TYPE attribute.
 There are currently three major audio file types supported:
 MP3
 Wav
 Ogg

5
D. Gichuki
6.3 Adding Audio

 It is important to add at least two versions of your file, to


increase the likelihood of your users browser being able to
play your audio.
 You can use multiple source elements within your
<audio>..<audio> element to link different files and types.
 Your visitors browser will use the first recognized format of
your audio file.
 The CONTROLS attribute is used to add controls to your
audio like volume, play and pause.
 There is no value attached to this attribute.

6
D. Gichuki
6.3 Adding Audio

 The HTML5 audio tag can have number of attributes to


control the look and feel and various functionalities of the
control:

Attribute Description
autoplay This Boolean attribute if specified, the audio will
automatically begin to play back as soon as it can
do so without stopping to finish loading the data.
muted Specifies that the audio output should be muted

controls If this attribute is present, it will allow the user to


control audio playback, including volume,
seeking, and pause/resume playback.

7
D. Gichuki
6.3 Adding Audio

 The HTML5 audio tag can have number of attributes to


control the look and feel and various functionalities of the
control:

Attribute Description
loop This Boolean attribute if specified, will allow audio
automatically seek back to the start after reaching
at the end.
preload This attribute specifies that the audio will be loaded
at page load, and ready to run. Ignored if autoplay
is present.
src The URL of the audio to embed. This is optional;
you may instead use the <source> element within
the audio block to specify the audio to embed.

8
D. Gichuki
6.3 Adding Audio

Example
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="bird.ogg" type="audio/ogg">
<source src="bird.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body> <audio src="/music/myaudio.ogg" autoplay></audio>
</html>
Result
Displays your audio file with controls for user to play the file.

The text will only be displayed in browsers that do not support the
<audio> element.
9
D. Gichuki
6.4 Adding Video

 The <video> tag specifies video, such as a movie clip or


other video streams.
 Before HTML5, a video could only be played in a browser
with a plug-in (like flash).
 The HTML5 <video> element specifies a standard way to
embed a video in a web page.
 Currently, there are 3 supported video formats for the
<video> element: MP4, WebM, Ogg
 The controls attribute adds video controls, like play, pause,
and volume.
 The <source> element allows you to specify alternative
video files which the browser may choose from.

10
D. Gichuki
6.4 Adding Video

Attribute Description
controls Specifies that video controls should be displayed (such as a
play/pause button etc).

loop This Boolean attribute if specified, will allow video automatically


seek back to the start after reaching at the end.

preload Specifies that the video will be loaded at page load, and ready to
run. Ignored if autoplay is present.

src The URL of the video to embed. This is optional; you may instead
use the <source> element within the video block to specify the
video to embed.

width specifies the width of the video's display area.

height specifies the height of the video's display area.

poster This is a URL of an image to show until the user plays or seeks.

autoplay Specifies that the video will start playing as soon as it is ready.

muted Specifies that the audio output of the video should be muted.
11
D. Gichuki
6.4 Adding Video

Example
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<video src="/myvideo.mp4"></video>
</body>
</html>
Result
Displays the video, with play, pause and volume controls, in a
space 320 pixels wide and 240 pixels high. If the browser does not
support the video, the text that you entered will be displayed:
Your browser does not support the video tag.

12
D. Gichuki
6.5 HTML <embed> Tag

 The <embed> tag defines a container for an external


application or interactive content (a plug-in).
 Plug-ins are computer programs that extend the standard
functionality of a web browser.
 The <embed> element also defines an embedded object
within an HTML document.
 The <embed> element can create a container for any
audio or video file you choose to link to your web page. It
can also be used to include HTML in HTML or images if you
like.
Attribute Description
src Specifies the address of the external file to embed
type Specifies the media type of the embedded content
width Specifies the width of the embedded content
height Specifies the height of the embedded content
13
D. Gichuki
6.5 HTML <embed> Tag

Example
<!DOCTYPE html>
<html>
<body>

<embed src="bird.mp3" width="100" height="50">

<embed src="movie.avi" width="320" height="240">

<embed src="helloworld.swf">

<embed width="100%" height="500px" src="itec229.html">

<embed src="flower.jpeg">

</body>
</html>
14
D. Gichuki
6.6 Using Youtube to Display Video

 The easiest way to display videos on your web page is


using a link to YouTube.
 You can upload your own videos to a YouTube account or
use any other video from YouTube.
 This method is easy because you don’t have to worry about
file types and browser support.
 To use YouTube video, you should just create an iframe and
linking your YouTube video as your SRC attribute.
 When linking a YouTube video you need to make sure
under "Share" you choose the "Embed" option. This will
actually give you the proper coding you need, without
having to write it yourself.

15
D. Gichuki
6.6 Using Youtube to Display Video

Example
<!DOCTYPE html>
<html>
<body>

<iframe width="600" height="400"


src="https://www.youtube.com/embed/9gTw2EDkaDQ"
frameborder="0" allowfullscreen></iframe>

</body>
</html>
Result

Displays the video in an iframe 600 pixels wide by 400 pixels high.

16
D. Gichuki

You might also like