html · level 2 · unit 7 · lesson 1
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
<video> adds a player, and lets people drive it.
<video> puts a video player on the page, and src names the video file, like puppy.mp4. Add controls, a word on its own like required, so people get play, pause and volume buttons. Without controls, nobody can start it.
names a picture to show before the video plays. width and height set its size in pixels, so the page does not jump about while it loads. A is one of the tiny dots that make up a screen.
Words between the tags only show in browsers that cannot play video at all.
<video src="puppy.mp4" controls poster="dog.svg" width="640" height="360">
Your browser cannot play this video.
</video> Press show my page to see it here.
Always add controls. People need a way to pause, and to turn the sound down.
guess first
What can visitors do with this video?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<video src="puppy.mp4" poster="dog.svg" width="320" height="180"></video>
your turn
Your turn. Make the video playable.
Add controls so people can play the video, and set the poster to dog.svg so something shows before it starts.
Press show my page to see it here.
- the video has controlsnot checked yet
- the poster is the dog picturenot checked yet
fix it
The poster never appears. Can you fix it?
Press show my page to see it here.
- the poster names the whole filenot checked yet
- The player is blank before it starts. Read the poster's file name.
- File names need their ending, like
.svg. - Change
poster="dog"toposter="dog.svg", then press run.
nailed it
your page has a video player. :D
<video>adds a player, andsrcnames the file.controlsgives people play and pause buttons.postershows a picture before it plays.
new words in your collection
- controls
- poster
- pixel
This lesson isn’t saved. A free account remembers every lesson you finish.