Multimedia Integration in HTML

Adding Audio in HTML The <audio> element allows embedding audio files. Audio Attributes Embedding Video The <video> element allows adding videos. Video Attributes Embedding YouTube Videos You can embed a YouTube video using an <iframe>. Using SVG for Scalable Graphics SVG is used for vector graphics. Canvas for Drawing Graphics The <canvas> element allows drawing […]

  • Post author:
  • Post category: HTML
  • Reading time: 35 mins read
  • Post last modified: April 3, 2025

Adding Audio in HTML

The <audio> element allows embedding audio files.

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

Audio Attributes

  • controls: Displays play, pause, and volume controls.
  • autoplay: Starts playing automatically.
  • loop: Repeats audio.
  • muted: Mutes the audio.

Embedding Video

The <video> element allows adding videos.

<video width="600" controls>
    <source src="video.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>
HTML

Video Attributes

  • poster: Sets a preview image before playback.
  • preload: Determines if the video loads with the page (auto, metadata, none).

Embedding YouTube Videos

You can embed a YouTube video using an <iframe>.

<iframe width="560" height="315" src="https://www.youtube.com/embed/example" allowfullscreen></iframe>
HTML

Using SVG for Scalable Graphics

SVG is used for vector graphics.

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="black" fill="red" />
</svg>
HTML

Canvas for Drawing Graphics

The <canvas> element allows drawing with JavaScript.

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "blue";
    ctx.fillRect(20, 20, 150, 75);
</script>
HTML

HTML multimedia enhances user experience. Next, we’ll discuss SEO & metadata.

Tags:

Leave a Reply