A photo, chart, or recording can explain an idea faster than a paragraph, but only if people can actually use it.
What You Need to Know
Multiple video source elements let browsers choose a format they can decode. List suitable types and include a simple fallback message for environments that cannot play the file.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<picture>
<source srcset="images/forest.avif" type="image/avif">
<source srcset="images/forest.webp" type="image/webp">
<img src="images/forest.jpg" alt="A sunlit forest path" width="960" height="640">
</picture>Let’s Read the Code
- <picture>: The picture can offer alternate crops or formats to the browser.
- <source>: A source points to a media file or image choice with a type or other condition.
- srcset: Srcset offers image candidates for different displays or layout sizes.
- type: Type changes what sort of control or resource the browser uses.
Read the named elements and attributes together. They explain how the browser connects this feature to the rest of the page.
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.
- Always check keyboard access, readable alternatives, and any missing files; a perfect player layout does not guarantee accessible content.
Key Takeaways
- Multiple video source elements let browsers choose a format they can decode.
- <picture>: The picture can offer alternate crops or formats to the browser.
- Remember that HTML form rules help the visitor, but server-side code must decide whether received data is valid.