Adding a picture or video is the easy part. Making it load efficiently and understandable to every visitor is the real goal.
What You Need to Know
Controlslist gives supported browsers hints about which media controls to offer. It is not a reliable way to prevent people from downloading content, and behavior varies across browsers.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<video controls controlslist="nodownload" width="640" poster="images/lesson-cover.jpg">
<source src="media/lesson.mp4" type="video/mp4">
Video is unavailable.
</video>
<p>Control-list hints may not be honored by all browsers.</p>Let’s Read the Code
- <video>: The video element creates a video player and can include alternative formats.
- <source>: A source points to a media file or image choice with a type or other condition.
- controls: Controls asks the browser to provide its native audio or video player controls.
- width: Width gives a preferred or intrinsic media width, depending on the element.
What the example shows: Controlslist can suggest that certain built-in controls be hidden, but browser support varies.
What Happens in the Browser?
The paths shown here refer to files in your own example project. Put real images and recordings in those locations before expecting them to load.
What if the resource is missing? Test the page with the media path temporarily broken. The surrounding text should still explain the important idea, and controls should remain understandable. This is especially important for slow connections and accessibility.
Your Turn
Replace the media filename with your own local recording and check playback, controls, and fallback content.
Common Beginner Mistakes
- Forgetting that captions are stored in a separate timed-text file, not generated by the video tag.
- Hiding a download button does not secure the video file or prevent access to its URL.
Key Takeaways
- Controlslist gives supported browsers hints about which media controls to offer.
- <video>: The video element creates a video player and can include alternative formats.
- If the resource cannot load, users still need enough text to understand what was meant to be there.