HTML5 Video

The <video> tag plays a video file in the browser, with no plugin. The browser shows its own play, pause and volume buttons when you add the controls attribute.

---

Basic example

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

The browser uses the first <source> that it can play. The text inside is shown only if the browser does not know the video tag.

---

Attributes of the video tag

Attribute	Meaning
controls	Show play, pause and volume buttons
width, height	Size of the video player
poster	An image shown before the video starts
autoplay	Start playing automatically. Works only with muted in most browsers
muted	Start without sound
loop	Play again and again
preload	Tell the browser how much to load: none, metadata or auto

<video width="480" controls poster="cover.jpg" preload="metadata">
  <source src="movie.mp4" type="video/mp4">
</video>

---

Add subtitles

Use the <track> tag with a WebVTT (.vtt) file.

<video width="480" controls>
  <source src="movie.mp4" type="video/mp4">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
</video>

---

Summary

• Use <video controls> with one or more <source> tags.
• MP4 is supported everywhere. Add WebM as an extra option.
• Use poster, muted, loop and track as needed.
• Next: HTML5 Audio.

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.