Skip to content
HTML5

Video & Audio

Embed media with multiple sources and control playback.

#video#audio#media

Code

html5
<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>