DEV Community

Mahalakshmi C
Mahalakshmi C

Posted on

HTML Multimedia

#html

Multimedia

  • HTML multimedia consists of different types of media, such as images, audio, video, and graphics, that are displayed on a web page.
  • Multimedia elements make websites more interactive, attractive, and user-friendly.

Types of multimedia in HTML

  • Images
  • Picture
  • Audio
  • Video
  • Iframe

Images

  • The <img> tag is used to display images on a web page.

Attribute

  • src – Specifies the URL or location of the image.
  • alt – Displays alternative text if the image cannot be loaded.
  • width – Specifies the width of the image.
  • height – Specifies the height of the image.
  • title – Displays additional information about the image.

Picture

  • The <picture> tag is used to display responsive images according to the screen size.

Attribute

  • srcset - Specifies the image source.
  • media - Defines the media condition.
  • alt - Specifies alternative text.

Audio

  • The <audio> tag is used to add audio files to a web page.

Attribute

  • controls – Displays audio controls.
  • autoplay – Plays the audio automatically.
  • loop – Repeats the audio continuously.
  • muted – Turns off the sound.
  • src – Specifies the location of the audio file.

Video

  • The <video> tag is used to add video files to a web page.

Attribute

  • controls – Displays video controls.
  • autoplay – Plays the video automatically.
  • loop – Repeats the video.
  • muted – Turns off the sound.
  • poster – Displays an image before the video starts.

Iframe

  • The <iframe> tag is used to embed content from another website into a web page such as maps and videos.

Attribute

  • src – Specifies the URL of the page.
  • width – Specifies the width of the frame.
  • height – Specifies the height of the frame.
  • allowfullscreen - Allows the content to be displayed in full-screen mode.
  • title – Provides a title for accessibility. 


<body>
    <h1>Css Media Query</h1>

    <picture>
        <source media="(max-width:800px)"
            srcset="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRScsHWXpkRc85dk8inl7RvZiZYQdr7HZha-obUn5JMLQ&s">

        <source media="(max-width:1000px )"
            srcset="https://sm.mashable.com/t/mashable_in/photo/default/spider-iron-man-copy_98dr.720.jpg">

        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyB9F4FOOGkZUCe0wOhSr5qskIYHp3VElpmRlqqSxkyA&s=10"
            alt="">
    </picture>
    <audio controls autoplay muted loop>
        <source  src="audio.mp3" type="audio/mpeg">  
    </audio>
    <iframe width="460" height="315" src="https://www.youtube.com/embed/s9X3AIpYTT4?si=85pjmyQ2okzTlJFQ"
        title="YouTube video player" frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</body>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)