• in
InterCourses
CoursesBlogs
← Introduction to HTML
○What Is HTML? See Tags in Action○Exercise: Build the Meridian Signal○Complete HTML5 Page Structure: See It in Action○Exercise: Build a Complete HTML5 Page✦Module Quiz
○Heading Hierarchy Demo: H1 and H2○Exercise: Extend the Signal Brief○Paragraphs and Inline Tags Demo○Exercise: Write Meridian's Survey Notes○List Types Demo: Steps, Items, and Terms○Exercise: Build a Crew member Loadout○Challenge: Transmit a Rescue Signal✦Module Quiz
○Hyperlinks○Images○Applying Styles to HTML✦Module Quiz
○Div and Span○HTML Tables○Classes and IDs○Review: Structured Profile✦Module Quiz
○Project 1 - Visiting Card Structure○Project 1 - Visiting Card Actions✦Module Quiz
○The Head Element and Page Title○Meta Tags○HTML Entities✦Module Quiz
○Form Basics Demo: Join the Meridian Relay○Exercise: Build a Night-Shift Check-In○Input Types Demo: Build a Mission Profile○Exercise: Record Beacon Maintenance○Choice Controls Demo: Select Training Modes○Exercise: Plan a Supply Pickup○Response Controls Demo: Send a Mission Reply○Exercise: Build a Rescue Dispatch Report○Challenge: Send an Emergency Beacon✦Module Quiz
○Project 2 - Contact Us Form Structure○Project 2 - Contact Us Form Actions✦Module Quiz
●Embedding Video○Embedding Audio○Iframes✦Module Quiz
○Semantic HTML Tags○Details, Figure, and Figcaption✦Module Quiz
○Project 3 - Resume Semantic Structure○Project 3 - Resume Links and Actions✦Module Quiz
Media and Embedding

Embedding Video

Mission

The Riverlight Community Hall wants a short welcome clip on its events page. Add a player that people can control, a still image while it loads, and captions for visitors who cannot hear the soundtrack.

What you'll build

An accessible video player with multiple source formats, a poster image, visible controls, and a caption track for visitors who cannot hear the soundtrack.

Target

With the named media files hosted beside the page, a visitor sees a poster and controls, then can play the clip and enable captions. The filenames here are illustrative; this informational lesson does not provide playable files.

One idea: the browser chooses the first playable source

<video> places a video on the page. Put several <source> elements inside it when you can provide multiple formats; the browser uses the first one it supports.

html
<video controls width="640" height="360" poster="hall-welcome.jpg">
    <source src="hall-welcome.webm" type="video/webm" />
    <source src="hall-welcome.mp4" type="video/mp4" />
    <track kind="captions" src="hall-welcome-en.vtt" srclang="en" label="English" />
    Your browser does not support the video tag.
</video>

controls provides a familiar play, pause, volume, and fullscreen interface. The text inside the element is fallback content. An .mp4 source has broad support; .webm is a useful additional format.

Checkpoint

In a page with these files available, the poster should appear before playback and the controls should be visible. If the player shows an empty area, check each source filename and its type first.

Playback choices

AttributeVisible or behavioral result
controlsDisplays the built-in player controls.
posterShows an image before playback starts.
mutedStarts with sound off.
loopRestarts at the end.
preload="metadata"Hints that the browser should fetch basic media details.

Avoid automatic sound. Browsers generally block audible autoplay; if a decorative clip truly must start itself, pair autoplay with muted.

Payoff

The hall can publish a welcome clip that visitors can control and understand, rather than a silent black box or an unexpected burst of sound.