Siksha Sarovar

Siksha Sarovar (sikshasarovar.com) is a free educational web application that helps students in India learn programming and prepare for academic and competitive exams. The platform offers structured coding courses (C, C++, Python, Java, HTML, CSS, PHP, Power BI, AI, Machine Learning, Data Science), complete university curriculum notes for BCA/MCA students with previous year question papers, Class 10 and Class 12 CBSE/HBSE school notes, and dedicated preparation material for SSC, UPSC, Banking, Railway and other government exams. Browsing the site is completely free and requires no account. Users may optionally sign in with Google solely to save their learning progress, quiz scores and personal preferences across devices.

Privacy Policy | Terms of Service | Contact Siksha Sarovar | About Siksha Sarovar

v4.0.9 · PWA
Siksha Sarovar logo
Siksha Sarovar
Your Learning Universe

Siksha Sarovar is a free e-learning platform for coding courses, BCA university notes and competitive exam preparation. Optional Google sign-in saves your learning progress across devices.

Initializing knowledge base…
Compiling modules 0%

HTML5 Multimedia: Audio, Video, Canvas

Lesson 8 of 34 in the free Web Technologies notes on Siksha Sarovar, written by Rohit Jangra.

HTML5 Multimedia: Audio, Video, Canvas

HTML5 Audio

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

Audio Attributes

AttributePurpose
controlsShow playback controls
autoplayPlay automatically
loopRepeat playback
mutedStart muted
preloadauto / metadata / none

HTML5 Video

<video width="640" height="360" controls poster="thumbnail.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
  Your browser does not support the video element.
</video>

Supported Formats

FormatAudioVideo
MP3-
OGG
MP4
WebM-
WAV-

HTML5 Canvas

The <canvas> element provides a drawing surface for 2D graphics via JavaScript.

<canvas id="myCanvas" width="400" height="200" style="border:1px solid black;"></canvas>

<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');

  // Draw rectangle
  ctx.fillStyle = 'blue';
  ctx.fillRect(50, 50, 150, 100);

  // Draw text
  ctx.font = '24px Arial';
  ctx.fillStyle = 'white';
  ctx.fillText('Hello Canvas!', 70, 110);

  // Draw line
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(400, 200);
  ctx.strokeStyle = 'red';
  ctx.stroke();
</script>

SVG vs Canvas

FeatureCanvasSVG
TypeRaster (pixel-based)Vector (scalable)
InteractionVia JS coordinatesEach element is a DOM node
PerformanceBetter for animationsBetter for complex graphics
AccessibilityPoorBetter
Use CaseGames, chartsIcons, diagrams

HTML5 Embed and iFrame

<!-- Embed YouTube video -->
<iframe width="560" height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  allowfullscreen>
</iframe>

<!-- Embed PDF -->
<embed src="document.pdf" type="application/pdf" width="600" height="400">
Key Takeaway: HTML5 natively supports audio, video, and canvas-based graphics without plugins. Always provide multiple source formats and fallback content for browser compatibility.