Scribd Logo
Upload

Welcome to Scribd!

  • 9.HTML Media

    Uploaded by

    Naruto Uzumaki
    18 views12 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    18 views12 pages

    9.HTML Media

    Uploaded by

    Naruto Uzumaki

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 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