DEV Community

ASHWINTH
ASHWINTH

Posted on

Media Elements - HTML

#beginners #frontend #html #webdev

What is Media Elements?

Modern websites are more than just text and images. Videos, audio clips, podcasts, animations, and other multimedia content can make a website more engaging and useful. HTML provides several built-in media elements that allow developers to add audio and video directly to web pages without relying entirely on third-party plugins.

The HTML audio Element

The audio element is used to add sound or audio files to a webpage. The controls attribute displays controls that allow visitors to play, pause, and adjust the volume.Use autoplay carefully because automatically playing sound can create a poor user experience.

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
</audio>

<audio controls loop>
  <source src="podcast.mp3" type="audio/mpeg">
</audio>
Enter fullscreen mode Exit fullscreen mode

Some useful attributes include:

controls — displays video controls.
width — sets the video width.
height — sets the video height.
autoplay — starts playback automatically.
loop — repeats the video.
muted — starts the video without sound.
poster — displays an image before the video starts.
preload — controls how the browser loads the video.

The HTML video Element

The video element allows you to display video content directly on a webpage.The controls attribute provides buttons for playing, pausing, changing the volume, and controlling playback.
The poster attribute is useful when you want to show a custom thumbnail before the visitor plays the video.

Example:


<video controls width="640">
  <source src="tutorial.mp4" type="video/mp4">
</video>


<video controls poster="thumbnail.jpg" width="800">
  <source src="course.mp4" type="video/mp4">
</video>
Enter fullscreen mode Exit fullscreen mode

The HTML source Element

The source element specifies the media file that should be used by an audio or video element. Providing multiple formats can help browsers choose a format they support.

For example:

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>
Enter fullscreen mode Exit fullscreen mode

You can also use multiple sources with audio:

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
</audio>
Enter fullscreen mode Exit fullscreen mode

The HTML iframe Element

The iframe element can embed external content inside a webpage.
If you host your own video file, video is usually the appropriate HTML element. If you're embedding a video hosted by another platform, an iframe may be used.

For example, you can embed a YouTube video:

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/example"
  title="HTML tutorial video"
  allowfullscreen>
</iframe>
Enter fullscreen mode Exit fullscreen mode

Unlike video, an iframe does not directly host the video file on your website. Instead, it displays content provided by another website or service.


Element Main Purpose
<audio>         Embeds audio files
<video>         Embeds video files
<source>    Provides media file sources
<track>         Adds subtitles and captions
<iframe>    Embeds external content
Enter fullscreen mode Exit fullscreen mode

Conculution

HTML media elements make it easy to add audio and video to modern websites. By learning elements such as audio, video, source, and track, tags for beginners can create richer and more accessible web pages.

Top comments (0)