Video — Complete Guide
Video — Complete Guide: free step-by-step lesson with examples, common mistakes, and interview tips — part of HTML Tutorial on Toolliyo Academy.
On this page
HTML Tutorial · Lesson 12 of 100
Video
Basics → Forms & semantics → APIs & performance → Projects
Basics · 1 — Structure & media · ~6 min · HTML — Media & Content
What is this?
video embeds movies with controls, poster, and multiple sources.
Why should you care?
MarkupVerse product tours use muted autoplay only when appropriate; most demos use controls.
See it live — copy this example
Save as demo.html and open in your browser, or use Run Example below.
<video controls width="640" poster="/media/tour-poster.jpg" preload="metadata">
<source src="/media/tour.webm" type="video/webm">
<source src="/media/tour.mp4" type="video/mp4">
<track kind="captions" src="/media/tour-en.vtt" srclang="en" label="English">
</video>Run Example »
Edit the code below and click Run to see the result in Toolliyo’s live editor.
What happened?
- Include captions when speech matters.
- Prefer muted if autoplay.
- Don’t rely on flash-era embeds.
Practice next
- Add poster + controls.
- Two sources.
- Add a captions track.
- Add muted playsinline for a silent loop.
- Set preload="none".
Remember
video + poster. Captions for speech. Controls by default.
MarkupVerse product tour
Landing shows tour with captions.
Outcome: Accessible demo without surprise audio.
Interview prep for this lesson
Practice these questions aloud after reading—each links to a full structured answer.
Sign in to ask a question or upvote helpful answers.
No questions yet — be the first to ask!
