Scribd
Upload
193 views9 pages

HTML Videos and Audio

This document discusses multimedia formats and embedding audio and video in HTML documents. It explains that the <audio> element can be used to embed audio files, and specifies formats like MP3 and WAV. The <video> element embeds video files like MP4, and it is best to include the width and height attributes. Both elements allow <source> tags to provide alternative file formats.

Uploaded by

Omar Mohamed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
193 views9 pages

HTML Videos and Audio

This document discusses multimedia formats and embedding audio and video in HTML documents. It explains that the <audio> element can be used to embed audio files, and specifies formats like MP3 and WAV. The <video> element embeds video files like MP4, and it is best to include the width and height attributes. Both elements allow <source> tags to provide alternative file formats.

Uploaded by

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

HTML Video &

Audio
HTML Multimedia
 Multimedia on the web is sound, music, videos,
movies, and animations.
 Multimedia comes in many different formats. It can be
almost anything you can hear or see.
 Examples: Images, music, sound, videos, records, films,
animations, and more.
 Web pages often contain multimedia elements of different
types and formats.
 In this chapter you will learn about the different multimedia
formats.

Web Development I HTML Video, Audio & Image Map


Multimedia Formats

 Multimedia elements (like audio or video) are stored in


media files.
 The most common way to discover the type of a file, is to
look at the file extension.
 Multimedia files have formats and different extensions like:
.swf, .wav, .mp3, .mp4, .mpg, .wmv, and .avi.

Web Development I HTML Video, Audio & Image Map


HTML5 Audio

 Audio on the Web


 Before HTML5, audio files could only be played in
a browser with a plug-in (like flash).
 The HTML5 <audio> element specifies a standard
way to embed audio in a web page.

Web Development I HTML Video, Audio & Image Map


The HTML <audio> Element

 To play an audio file in HTML, use the <audio>


element:
Example:
<audio controls>
  <source src=“123.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Web Development I HTML Video, Audio & Image Map


HTML Audio - How It Works

 The controls attribute adds audio controls, like


play, pause, and volume.
 The <source> element allows you to specify
alternative audio files which the browser may
choose from. The browser will use the first
recognized format.
 The text between the <audio> and </audio> tags
will only be displayed in browsers that do not
support the <audio> element.

Web Development I HTML Video, Audio & Image Map


The HTML <video> Element

 The HTML5 <video> element specifies a standard


way to embed a video in a web page.
 To show a video in HTML, use the <video>
element:
<video width="320" height="240" controls>
  <source src=“Bilaal.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

Web Development I HTML Video, Audio & Image Map


HTML Video - How It Works

 The controls attribute adds video controls, like


play, pause, and volume.
 It is a good idea to always include width and
height attributes. If height and width are not set,
the page might flicker while the video loads.
 The <source> element allows you to specify
alternative video files which the browser may
choose from. The browser will use the first
recognized format.
 The text between the <video> and </video> tags
will only be displayed in browsers that do not
support the <video> element.

Web Development I HTML Video, Audio & Image Map

You might also like