BitWithBite
HTML Worksheet
🌐 HTML Video
SCORE___ / 20
NameClassDate
After this worksheet you can
Embed video with controlsposter imageswidth and aspectCaptions with track📚 Quick Recap
The <video> element works almost identically to <audio> — same <source> pattern, same attribute family — but adds visual-specific features: a poster image, width/height, and the crucial <track> element for synchronized captions. Accessible video is also a legal requirement in many jurisdictions.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1Native video uses:
2A preview image before play:
3Subtitles are added with:
4The common web video format is:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5<video > shows the controls bar.
6poster=".jpg" sets the preview frame.
7Embed clip.mp4, 640 wide, with controls + poster.
8Why add captions?
9Video vs YouTube iframe - when self-host?
🚀 Section C · Challenge ● CHALLENGE 5
10Write a track line for English captions.
💭 Reflection — the most useful thing I learned:
A ___/4 B ___/11 C ___/5 Total ___/20
Teacher's Signature
Parent's Signature
✂ answer key — fold or cut before handing out
1-A 2-A 3-A 4-A | 5 controls 6 preview (an image) 7 = <video controls width="640" poster="p.jpg" src="clip.mp4"></video> 8 = Accessibility (deaf users), noisy places, SEO 9 = Control/no branding vs bandwidth cost; iframe offloads hosting | 10 = <track src="en.vtt" kind="captions" srclang="en" label="English">