HTML Video and Audio – video, audio, source, track Elements

<!-- Simplest video with browser controls -->
<video src="intro.mp4" controls width="800" height="450">
  Your browser does not support the video element.
</video>

<!-- All common attributes -->
<video
  src="lesson.mp4"
  controls          <!-- show browser playback controls -->
  autoplay          <!-- start playing immediately -->
  muted             <!-- required for autoplay in most browsers -->
  loop              <!-- replay when finished -->
  playsinline       <!-- play inline on iOS instead of fullscreen -->
  poster="thumbnail.jpg"  <!-- image shown before video starts -->
  width="800"
  height="450">
  Your browser does not support the video element.
</video>

<video controls width="800" height="450" poster="thumbnail.jpg">
  <!-- MP4 (H.264): supported by all modern browsers — list first -->
  <source src="video.mp4" type="video/mp4">

  <!-- WebM (VP9): smaller file size, supported by Chrome/Firefox/Edge -->
  <source src="video.webm" type="video/webm">

  <!-- OGG/Theora: legacy Firefox fallback -->
  <source src="video.ogv" type="video/ogg">

  <!-- Fallback text for very old browsers -->
  Your browser does not support HTML5 video.
  <a href="video.mp4">Download the video</a> instead.
</video>

<!-- Simple audio player -->
<audio src="podcast.mp3" controls>
  Your browser does not support the audio element.
</audio>

<!-- With multiple sources and all attributes -->
<audio controls loop preload="metadata">
  <source src="song.mp3" type="audio/mpeg">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.wav" type="audio/wav">
  Your browser does not support HTML5 audio.
</audio>

<video controls width="800" height="450">
  <source src="lesson.mp4" type="video/mp4">

  <!-- Captions (subtitles + sound descriptions for deaf viewers) -->
  <track
    kind="captions"
    src="captions-en.vtt"
    srclang="en"
    label="English captions"
    default>

  <!-- Subtitles (translation for hearing viewers who don't know the language) -->
  <track
    kind="subtitles"
    src="subtitles-es.vtt"
    srclang="es"
    label="Español">

  <!-- Chapter markers (shown in seek bar in some browsers) -->
  <track
    kind="chapters"
    src="chapters.vtt"
    srclang="en"
    label="Chapters">
</video>

WEBVTT

00:00:00.000 --> 00:00:03.000
Welcome to this HTML tutorial.

00:00:03.500 --> 00:00:07.000
Today we'll learn about the video element.

00:00:07.500 --> 00:00:12.000
Let's look at the source and track elements.

<video controls width="800" height="450">
  <source src="lesson.mp4" type="video/mp4">
  <source src="lesson.webm" type="video/webm">
  <track kind="captions" src="captions-en.vtt" srclang="en" label="English" default>

  <!-- Fallback: visible only if browser does not support <video> -->
  <p>
    Your browser doesn't support HTML5 video.
    <a href="lesson.mp4">Download the video (MP4, 45 MB)</a>
    or <a href="transcript.html">read the transcript</a>.
  </p>
</video>

<video id="myVideo" src="lesson.mp4" width="800" height="450"></video>
<button onclick="playVideo()">Play</button>
<button onclick="pauseVideo()">Pause</button>
<button onclick="skipTo(60)">Jump to 1:00</button>

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

  function playVideo() {
    video.play();   // returns a Promise
  }

  function pauseVideo() {
    video.pause();
  }

  function skipTo(seconds) {
    video.currentTime = seconds;  // seek to position in seconds
  }

  // Useful properties
  console.log(video.duration);     // total length in seconds
  console.log(video.currentTime);  // current playback position
  console.log(video.paused);       // true / false
  console.log(video.volume);       // 0.0 to 1.0
  console.log(video.muted);        // true / false
  console.log(video.playbackRate); // 1.0 = normal speed, 2.0 = 2x speed

  // Events
  video.addEventListener('play',   () => console.log('Playing'));
  video.addEventListener('pause',  () => console.log('Paused'));
  video.addEventListener('ended',  () => console.log('Finished'));
  video.addEventListener('timeupdate', () => {
    // Fires multiple times per second during playback
    console.log('Position:', video.currentTime.toFixed(1), 's');
  });
</script>

<!-- none: download nothing until user presses play
     Best for pages with many videos, or when bandwidth matters -->
<video src="large-video.mp4" controls preload="none" poster="thumb.jpg"></video>

<!-- metadata: download only duration, dimensions, first frame
     Good default — allows poster/duration display without big download -->
<video src="lesson.mp4" controls preload="metadata"></video>

<!-- auto: browser downloads as much as it thinks is appropriate
     Default behaviour if preload is omitted.
     Can waste bandwidth on pages where user might not watch the video -->
<video src="hero-video.mp4" controls preload="auto"></video>