Use the <video> element with one or more <source> children, and the browser plays the first format it supports.
<video controls width="320" height="240" poster="thumbnail.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser doesn't support video.
</video>
Listing an .mp4 and a .webm source covers browsers with different codec support. The text inside the element shows only in browsers that can't play HTML video.
Key attributes:
controlsshows the browser's playback controls.autoplaystarts playback on load, but browsers block autoplay with sound, so pair it withmuted.looprestarts the video when it ends.mutedstarts the video silenced.postersets a thumbnail image to show before playback starts.
Rewriting in plainer words…
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
The diagram below the answer is the concept . Jump to it ↓
Tailored explanation · switch back to · ·
What should the new diagram focus on?