Video & Audio

Code

<video width="640" controls poster="cover.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  <source src="song.ogg" type="audio/ogg">
</audio>

<script>
  const v = document.querySelector("video");
  v.addEventListener("loadedmetadata", () => {
    console.log("duration:", v.duration);
  });
  // play() / pause() control playback programmatically
  // v.playbackRate = 2;  // 2x speed
</script>

Explanation

The video and audio elements embed media without plugins, with multiple source tags providing format fallbacks. The controls attribute adds a default UI, and the JS API exposes play(), pause(), currentTime, and playbackRate. Listening to events like loadedmetadata lets scripts react to playback state.

More HTML5 Snippets