Imagine opening this page on a slow phone connection. The media should still be worth the wait and have a sensible fallback.
What You Need to Know
Muted autoplay is more likely to work than autoplay with sound, and playsinline helps mobile playback stay inside the page. It is still better to leave users in control of important video content.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<video autoplay muted playsinline loop width="640">
<source src="media/short-demo.mp4" type="video/mp4">
Your browser cannot play this video.
</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.
- width: Width gives a preferred or intrinsic media width, depending on the element.
- src: Src identifies a resource path for images, frames, or media.
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
- Muted autoplay is more likely to work than autoplay with sound, and playsinline helps mobile playback stay inside the page.
- <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.