Multimedia and Graphics in HTML5: Audio, Video, Canvas, and SVG

Beginner

🎥 Multimedia & Graphics in HTML5

HTML5 introduced native support for multimedia and graphics, eliminating the need for third-party plugins like Flash.

🔊 <audio> and 🎞️ <video> Tags

Enable embedding and control of media directly in HTML using attributes like:

  • controls: Display playback controls
  • src: Specify media file location
  • autoplay: Start playback automatically

📽️ Video Example

<video controls width="600">
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

🖌️ <canvas> Element

Provides a drawable area for 2D and 3D graphics using JavaScript APIs. Ideal for:

  • 🎮 Games
  • 📊 Visualizations
  • 🎞️ Animations

🖼️ Canvas Example

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

🧩 SVG (Scalable Vector Graphics)

  • Embeds vector-based graphics directly in HTML
  • Resolution-independent and ideal for icons, charts, and logos

✅ HTML5’s multimedia features empower developers to build rich, interactive experiences across all modern browsers without external dependencies.