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
Source elements offer alternate versions of the same recording, so a browser can choose a format it understands. They belong inside audio, video, or picture, where the surrounding element decides how to use them.
In this example: provide MP4 and WebM sources.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<video controls width="600">
<source src="media/lesson.webm" type="video/webm">
<source src="media/lesson.mp4" type="video/mp4">
This video cannot be played here.
</video>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: The browser checks the source list to find a format it can play.
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
Remove the first source and observe whether the fallback video plays.
Common Beginner Mistakes
- Leaving out real media files or understandable text alternatives.
- A source element does not guarantee playback; actual files and codecs must be supported.
Key Takeaways
- Source elements offer alternate versions of the same recording, so a browser can choose a format it understands.
- <video>: The video element creates a video player and can include alternative formats.
- Remember that HTML form rules help the visitor, but server-side code must decide whether received data is valid.