HTML Video Integration

The <video> tag is used to embed video content directly in web pages.


Basic Syntax

<video src="video.mp4" controls></video>

Common Attributes

Attribute Description
controls Shows play/pause/volume controls
autoplay Starts playing automatically (often requires muted)
loop Restarts video after it ends
muted Plays video without sound
poster Displays an image before video starts
width/height Sets video dimensions
preload Hints how much to load (auto, metadata, none)

Complete Example

<video width="640" height="360" controls autoplay muted loop poster="thumbnail.jpg">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Your browser does not support HTML5 video.
</video>

HTML Audio Integration

The <audio> tag is used to embed sound files like music or podcasts.


Basic Syntax

<audio src="audio.mp3" controls></audio>

Common Attributes

Attribute Description
controls Displays audio player controls
autoplay Starts playing automatically
loop Plays audio in a loop
muted Plays audio without sound
preload Hints how audio should load (auto, metadata, none)

Complete Example

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

Best Practices

  • Provide multiple formats (MP4, WebM for video; MP3, OGG for audio)
  • Use the <source> tag for fallback formats
  • Always include controls for accessibility
  • Avoid autoplay unless muted (especially on mobile devices)
  • Use meaningful file names and descriptive text for SEO
  • Include text fallback for unsupported browsers
  • Optimize media files for web (balance quality and size)
  • Consider using preload="metadata" for better performance
  • Test across different browsers and devices
  • Add captions/subtitles for videos when needed

Responsive Video Example

<div style="position: relative; padding-bottom: 56.25%; height: 0;">
  <video 
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    controls
    poster="thumbnail.jpg">
    <source src="video.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
  </video>
</div>