Back to subject
HTML5/HTML Video

Add a Learning Video

Practical lesson

Let's add a video player and inspect the same basic media pattern.

- <video> is the container for video playback. - controls asks the browser to show play, pause, volume, and other available controls. - Add one or more <source> elements with the video file paths. - type can describe each source's media format. - width and height can describe the intended player dimensions. - poster can provide an image shown before the video starts. - Include useful fallback text inside <video>. - Add captions with <track> when the video needs text for spoken content or other timed information. - Do not rely on autoplay for important content because browser policies may block it.

Read the example as a complete media element: player, source file, controls, fallback, and optional accessibility support.

Try it yourself
Code

Starter example

Code
<video controls width="640" poster="poster.jpg">
  <source src="lesson.mp4" type="video/mp4">
  Your browser does not support video.
</video>
Live preview