Media

<!-- Basic video with fallback message -->
<video src="/videos/demo.mp4" controls>
  Your browser does not support HTML video.
</video>

<!-- Multiple sources for cross-browser support -->
<video controls width="800" height="450" poster="/videos/thumb.jpg">
  <source src="/videos/demo.av1.mp4" type="video/mp4; codecs=av01">
  <source src="/videos/demo.webm" type="video/webm">
  <source src="/videos/demo.mp4" type="video/mp4">
  <!-- Subtitles / captions -->
  <track kind="captions" src="/videos/demo-en.vtt" srclang="en" label="English" default>
  <track kind="captions" src="/videos/demo-es.vtt" srclang="es" label="Spanish">
  Your browser does not support HTML video.
</video>

<!-- Autoplaying background video (requires muted) -->
<video autoplay muted loop playsinline poster="/bg-thumb.jpg">
  <source src="/bg.webm" type="video/webm">
  <source src="/bg.mp4" type="video/mp4">
</video>

<!-- Basic audio -->
<audio src="/audio/song.mp3" controls>
  Your browser does not support HTML audio.
</audio>

<!-- Multiple sources -->
<audio controls preload="metadata">
  <source src="/audio/song.ogg" type="audio/ogg">
  <source src="/audio/song.mp3" type="audio/mpeg">
  <source src="/audio/song.wav" type="audio/wav">
  Your browser does not support HTML audio.
</audio>

<video controls>
  <!-- Most modern codec first (best quality/size) -->
  <source src="video.av1.mp4" type="video/mp4; codecs=av01.0.05M.08">
  <source src="video.webm" type="video/webm; codecs=vp9,opus">
  <source src="video.mp4" type="video/mp4">
</video>

<video controls src="/movie.mp4">
  <!-- Captions: for deaf/HoH — includes speaker IDs and sound descriptions -->
  <track kind="captions" src="/captions-en.vtt" srclang="en" label="English" default>

  <!-- Subtitles: only dialogue translation -->
  <track kind="subtitles" src="/subs-es.vtt" srclang="es" label="Spanish">
  <track kind="subtitles" src="/subs-fr.vtt" srclang="fr" label="French">

  <!-- Chapters: navigation cue points -->
  <track kind="chapters" src="/chapters.vtt" srclang="en" label="Chapters">

  <!-- Metadata: for JavaScript consumption -->
  <track kind="metadata" src="/meta.vtt">

  <!-- Descriptions: extended descriptions for blind users -->
  <track kind="descriptions" src="/descriptions-en.vtt" srclang="en">
</video>

<!--
WEBVTT

00:00:00.000 --> 00:00:03.000
Welcome to the tutorial.

00:00:03.500 --> 00:00:07.000
Today we will cover HTML5 media elements.

00:00:07.500 --> 00:00:10.000
Let's get started!
-->

<!-- PDF viewer -->
<embed
  type="application/pdf"
  src="/docs/report.pdf"
  width="800"
  height="600"
  title="Annual Report PDF"
>

<object
  data="/docs/report.pdf"
  type="application/pdf"
  width="800"
  height="600"
>
  <p>
    Your browser can't display this PDF.
    <a href="/docs/report.pdf">Download it instead</a>.
  </p>
</object>

<!-- YouTube embed -->
<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="Video title"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
  loading="lazy"
  referrerpolicy="strict-origin-when-cross-origin"
></iframe>

<!-- Google Maps -->
<iframe
  src="https://maps.google.com/maps?q=New+York&output=embed"
  width="600"
  height="400"
  style="border:0"
  loading="lazy"
  title="Map of New York"
  allowfullscreen
></iframe>

<!-- Sandboxed iframe -->
<iframe
  src="https://example.com"
  sandbox="allow-scripts allow-same-origin"
  title="Sandboxed content"
></iframe>

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

<script>
  const video = document.getElementById('player');

  // Playback control
  video.play();
  video.pause();
  video.load();    // reload source

  // Properties
  video.currentTime = 30;         // seek to 30s
  video.playbackRate = 1.5;       // 1.5x speed
  video.volume = 0.5;             // 0 to 1
  video.muted = true;
  video.loop = true;

  // State
  console.log(video.paused);      // true/false
  console.log(video.duration);    // total seconds
  console.log(video.ended);       // true/false
  console.log(video.readyState);  // 0-4

  // Events
  video.addEventListener('play',     () => console.log('playing'));
  video.addEventListener('pause',    () => console.log('paused'));
  video.addEventListener('ended',    () => console.log('ended'));
  video.addEventListener('timeupdate', () => console.log(video.currentTime));
  video.addEventListener('loadedmetadata', () => console.log(video.duration));
  video.addEventListener('error',    (e) => console.error(e));
</script>

<!-- Aspect-ratio box (16:9) -->
<div style="position: relative; padding-top: 56.25%;">
  <iframe
    style="position: absolute; inset: 0; width: 100%; height: 100%;"
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="Video"
    allowfullscreen
  ></iframe>
</div>

<!-- Modern CSS: aspect-ratio property -->
<video controls style="width: 100%; aspect-ratio: 16/9;">
  <source src="/video.mp4" type="video/mp4">
</video>