Summary
This chapter covers how to use the HTML video element with the controls attribute for playback UI and the poster attribute for thumbnail previews to enhance user experience.

General domain of usage
Front-end web development

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPHRpdGxlPkVtYmVkZGluZyBWaWRlbyBFeGFtcGxlPC90aXRsZT4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8aDE+UHJvZHVjdCBEZW1vIFZpZGVvPC9oMT4KICAgIDx2aWRlbwogICAgICBjb250cm9scwogICAgICBwb3N0ZXI9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLXYyLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvdXJzZXMvMzIzOWZmOWMtZmU1NS00MmUyLThlM2QtZGYyYTg1ZmQ0MTM4L3NlY3Rpb24tMy9wb3N0ZXIucG5nIgogICAgICB3aWR0aD0iNjQwIgogICAgPgogICAgICA8c291cmNlCiAgICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS12Mi5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb3Vyc2VzLzMyMzlmZjljLWZlNTUtNDJlMi04ZTNkLWRmMmE4NWZkNDEzOC9zZWN0aW9uLTMvdmlkZW8ubXA0IgogICAgICAgIHR5cGU9InZpZGVvL21wNCIKICAgICAgLz4KICAgICAgPCEtLSA8c291cmNlIHNyYz0icHJvZHVjdC1kZW1vLndlYm0iIHR5cGU9InZpZGVvL3dlYm0iIC8+IC0tPgogICAgICBTb3JyeSwgeW91ciBicm93c2VyIGRvZXMgbm90IHN1cHBvcnQgZW1iZWRkZWQgdmlkZW9zLgogICAgPC92aWRlbz4KICAgIDxwPgogICAgICBXYXRjaCB0aGlzIHNob3J0IHZpZGVvIGZvciBhIHF1aWNrIG92ZXJ2aWV3IG9mIG91ciBuZXcgcHJvZHVjdCBmZWF0dXJlcy4KICAgIDwvcD4KICA8L2JvZHk+CjwvaHRtbD4=

When you embed video in your HTML, always use the `controls` attribute on the `video` element. This ensures users can play, pause, adjust volume, and seek through the video at their own pace. Including a `poster` image provides a preview or thumbnail before the video starts, improving the user experience and making your page look more polished.

Avoid using autoplay for videos, as it can be disruptive for users. Always make sure the controls are visible so users can interact with the video. Test video playback on different devices and browsers to ensure compatibility and accessibility.

Note

What is the purpose of the controls attribute on the `<video>` element?

Learn how to create meaningful, accessible, and visually rich web content using HTML. Combine text, images, audio, and video to craft pages that are structured, engaging, and optimized for search engines. Gain practical skills in semantic markup, media integration, and navigation design to build web pages that look great and perform well.

Build a strong foundation for creating clear and readable web content. Use semantic elements to structure text, emphasize key information, and organize content with lists that enhance both meaning and accessibility.

Enhance web pages with images that are both visually engaging and accessible. Embed and optimize visuals effectively, add descriptive alt text, and use figures with captions to give context and meaning to visual content.

Combine multimedia and navigation elements to create engaging, discoverable, and user-friendly websites. Add audio and video content, build intuitive navigation menus, and include meta information that improves SEO and accessibility.

Embedding Video