A real video player (the video is drawn by JavaScript)
There's no video file here: JavaScript paints a canvas and streams it into the player. Use the controls to pause, and try the full-screen button.
<audio> and <video> play sound and film right in the page; attributes control the player, <source> offers formats in order, and browsers only autoplay when the sound is off.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a video player for lesson.mp4 (1280×720) with controls, a poster lesson.jpg, no preloading, and a WebM version lesson.webm offered first.
Write a silent hero background video bg.mp4 that starts by itself, repeats and plays inline on iPhones.
Write JavaScript that starts an <audio id="song"> when a button #play is clicked and logs the error name if it fails.
Explain it without notes
What are the browser's autoplay rules, and how do you design around them?
How does the browser choose between several <source> elements, and why include type?
When is the content inside <video> displayed, and what should you do when a file fails to play?
What do preload values none, metadata and auto mean?
Preview
Console
Nothing logged yet.Expected console output
muted: true | loop: true | paused: true
readyState before any media: 0