Bits of .NET

🎵 Embed Audio and Video Natively

No more Flash or plugins. <audio> and <video> embed media natively. Controls, autoplay, looping — all built-in.

📝 Audio Tag

<!-- Basic audio -->
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  Your browser doesn't support audio.
</audio>

<!-- Autoplay, loop, muted -->
<audio controls autoplay loop muted>
  <source src="background.mp3" type="audio/mpeg">
</audio>

<!-- Preload metadata (faster loading) -->
<audio preload="metadata" controls>
  <source src="podcast.mp3" type="audio/mpeg">
</audio>

🎯 Video Tag

<!-- Basic video -->
<video controls width="640" height="360">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Your browser doesn't support video.
</video>

<!-- Autoplay, loop, muted (required for autoplay) -->
<video controls autoplay loop muted>
  <source src="background.mp4" type="video/mp4">
</video>

<!-- Poster image -->
<video controls poster="thumbnail.jpg">
  <source src="video.mp4" type="video/mp4">
</video>

<!-- Responsive video (with CSS) -->
<style>
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

💡 Attributes

• controls: Show player controls
• autoplay: Play automatically (muted required for Chrome)
• loop: Repeat playback
• muted: Start muted
• preload: none, metadata, auto
• poster: Image displayed before video plays
• width/height: Video dimensions