Scribd
Upload
46 views12 pages

9.HTML Media

Uploaded by

Naruto Uzumaki
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
46 views12 pages

9.HTML Media

Uploaded by

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

HTML Media

2 What is Multimedia?

 Multimedia comes in many different formats.

 images, music, sound, videos, records, films, animations, and more

 Web pages often contain multimedia elements of different types and


formats.

Browser Support
 The first web browsers had support for text only, limited to a single font in a
single color.

 Later came browsers with support for colors, fonts, images, and multimedia!
3 Common Video Formats

 There are many video formats out


there.

 The MP4, WebM, and Ogg formats are


supported by HTML.

 The MP4 format is recommended by


YouTube.
4 Common Audio Formats

 MP3 is the best format for compressed recorded music.


 The term MP3 has become synonymous with digital music.
5 HTML <video> Element

 To show a video in HTML, use the <video> element

<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>

 controls attribute adds video controls, like play, pause, and volume
 <source> element – specify alternative video files which the browser may
choose from. The browser will use the first recognized format.
 To start a video automatically, use the autoplay attribute
 Add muted after autoplay to start playing automatically (but muted)
6 Browser Support
7 HTML <audio> Element

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

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

 Note: Chromium browsers do not allow autoplay in most cases. However,


muted autoplay is always allowed.

Chromium is a free and open-source codebase for a web browser, principally developed and
maintained by Google. Eg/ Chrome, Microsoft Edge, Samsung Internet, Opera,etc.
8 Browser Support
9 HTML Iframes

 to display a web page within a web page


 <iframe> tag specifies an inline frame to embed another document within
the current HTML document.
 <iframe src="url (eg/.html)" title="description"></iframe>

EXAMPLE – YouTube - Autoplay + Muted

<iframe width="420" height="315"


src="https://www.youtube.com/embed/tgbNymZ7vqY?
autoplay=1&mute=1">
</iframe>
10 HTML Favicon

 small image displayed next to the page title in the browser tab
 Tip: A favicon is a small image, so it should be a simple image with high
contrast.
 A common name for a favicon image is "favicon.ico".

<head>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
11 HTML Entities

 Reserved characters in HTML must be replaced with character entities.


 If less than (<) or greater than (>) signs are used in the content, the browser
might mix them with tags.
 Character entities are used to display reserved characters in HTML.

&entity_name; OR
&#entity_number;

 Eg/ To display a less than sign (<): &lt; or &#60;


12 Some Useful HTML Character Entities
Result Description Entity Name Entity
Number
non-breaking space &nbsp; &#160;
< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &amp; &#38;
" double quotation mark &quot; &#34;
' single quotation mark &apos; &#39;
(apostrophe)
¢ cent &cent; &#162;
£ pound &pound; &#163;
¥ yen &yen; &#165;
€ euro &euro; &#8364;
© copyright &copy; &#169;
® registered trademark &reg; &#174;

You might also like