Embedding video with the HTML video element
You do not need a JavaScript player just to put a video on a page. The native <video> element handles playback controls, multiple file formats, and text tracks:
<video width="500" height="300" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<track src="subtitle.vtt" kind="subtitles" />
Your browser does not support the HTML5 video tag.
</video>
The browser tries each <source> in order and uses the first format it supports. The controls attribute asks it to show its native playback controls, while <track> adds subtitles from a WebVTT file.
Text between <video> and </video> is fallback content for browsers that do not support the element. In practice, the subtitle track and useful controls matter much more for modern browsers, so do not treat them as optional polish.
Enjoyed reading this?
If you found this article helpful, consider supporting my writing. Every little bit helps keep this blog going.
Related articles
- HTML Features That Can Save You Some JavaScript
Use native disclosures, dialogs, popovers, form attributes, and responsive images before rebuilding their basic behaviour.
- The HTML Details That Make Forms More Accessible
Build clearer forms with visible labels, autocomplete, connected help and errors, fieldsets, and visible focus.
- When a Control Needs aria-label
Use aria-label for genuinely unlabelled controls while keeping visible text and native elements as the first choice.