The HTML5 video element puts moving pictures directly on a web page. Think of it as a small screen that can show a poster image, provide playback controls, start automatically, or repeat when the video ends. section 6.28
Build the element in small pieces:
- Use src to point to one video file. section 6.28
- Use poster for an image displayed before playback, and width and height for the playback window. section 6.28
- Add controls for browser playback controls, autoplay to begin after enough data downloads, and loop to restart after the video ends. section 6.28
- Offer several formats with separate source elements; each source identifies its file and its video and audio codecs. section 6.29
A tiny video screen
A single-format video can look like this: <video src="movie.mp4" poster="movie-poster.jpg" width="625" height="480" controls loop></video>. The browser loads the video from src, shows the poster first, displays controls, and repeats playback. section 6.28
<video src="file"
poster="file"
width="value"
height="value"
controls
autoplay
loop>
</video>
Use this compact template as a checklist for the element's file, preview image, dimensions, and playback options. section 6.28
Media formats are the tricky part: a container packages media data and metadata, while codecs encode, compress, decode, and decompress it. There is no universal web media format, so multiple sources may improve format coverage. section 6.25 section 6.29
