Learn
02.4 | AUDIO, VIDEO AND EMBEDDED CONTENT
01 | USE MEDIA TO EXPLAIN AN IDEA
A short clip of a robot lifting a parcel can show movement more clearly than a paragraph. An audio interview can let an engineer explain a design decision in their own voice. Choose media because it helps the learning.
audio and video play media files. An iframe embeds another document or player. These are different tools, with different requirements.
Give people control over playback. Include text alternatives so the important information remains available when someone cannot hear the audio, see the video or load the player.
The example paths below refer to files you must supply. They are not included automatically with an HTML page.
02 | ADD AUDIO WITH NATIVE CONTROLS
<audio controls preload="metadata">
<source src="static/audio/robot-interview.mp3" type="audio/mpeg">
<p>Your browser does not support this audio player.</p>
</audio>
<p><a href="static/audio/robot-interview.mp3">Open the interview audio</a></p>controls asks the browser to provide its playback controls. Their appearance varies. source supplies a file path and an optional media type hint.
preload="metadata" suggests loading information such as duration before playback. It is a hint, not a guarantee of exactly what the browser will fetch. preload="none" suggests avoiding preloading.
The fallback text inside audio is for browsers that do not support the element. It is not a reliable error message for every missing file or unsupported format. A separate link remains available outside the player.
A filename extension alone does not guarantee playback. The browser must support the media’s format and encoding.
03 | ADD VIDEO AND A POSTER IMAGE
<video controls preload="metadata" playsinline
width="800" height="450"
poster="static/images/robot-demo-poster.jpg"
style="display:block;width:100%;max-width:800px;height:auto;margin:20px auto;">
<source src="static/video/robot-demo.mp4" type="video/mp4">
<p>Your browser does not support this video player.</p>
</video>
<p><a href="static/video/robot-demo.mp4">Open the robot demonstration</a></p>poster supplies an image displayed before playback in appropriate circumstances. It is not a text alternative for the video. playsinline requests playback within the page on devices where that choice applies.
The width and height attributes describe dimensions. The inline style keeps this example within its container, caps its width and preserves proportions. You will move presentation rules into CSS in the next section of the course.
MP4 is a container format. Its internal audio and video codecs also affect compatibility. Test the actual file in the browsers your learners use.
04 | CAPTIONS ARE PART OF THE CONTENT
<video controls preload="metadata">
<source src="static/video/robot-demo.mp4" type="video/mp4">
<track kind="captions" src="static/video/robot-demo-en.vtt"
srclang="en" label="English" default>
</video>A track can attach timed text to a video. kind="captions" describes spoken words and relevant sounds for people who cannot hear them. srclang identifies the language, and label names the track in the player.
default requests that this track be selected by default when appropriate; user preferences can affect the result. Review automatically generated captions for names, technical terms and timing.
WEBVTT
00:00:00.000 --> 00:00:03.000
The robot uses a distance sensor to detect the parcel.
00:00:03.000 --> 00:00:06.000
[Motor starts] The lifting arm raises the parcel.Save this timed-text format as a .vtt file. A cue has a start time, an end time and text. Captions describe audio; they do not automatically explain every important visual action.
05 | TRANSCRIPTS AND VISUAL INFORMATION
A transcript presents the spoken content and relevant sounds as readable text. A descriptive transcript can also explain important visual information. It supports review, searching and learners who cannot play the media.
<section aria-labelledby="transcript-heading">
<h2 id="transcript-heading">Robot demonstration transcript</h2>
<p>The robot uses a distance sensor to detect the parcel.</p>
<p>[Motor starts. The arm lifts a small parcel onto the platform.]</p>
</section>If crucial information is visible but not spoken, include it in the narration, provide suitable audio description or make it available through an appropriate descriptive alternative. Captions alone do not solve missing visual information.
An audio interview needs a useful transcript. A silent demonstration still needs an explanation of its meaningful visual content. An alt attribute on video is not a substitute for these alternatives.
06 | EMBED AN EXTERNAL PLAYER
<iframe
src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
title="Robot parcel-lifting demonstration"
loading="lazy"
allow="fullscreen"
allowfullscreen
style="display:block;width:100%;max-width:800px;aspect-ratio:16/9;border:0;margin:20px auto;">
</iframe>
<p><a href="https://www.youtube.com/watch?v=VIDEO_ID">
Watch the robot demonstration on YouTube
</a></p>Replace VIDEO_ID with the actual identifier from a video you are permitted to embed, or use the provider’s supplied embed code. A normal watch-page URL is usually not the right iframe source.
The iframe title names its purpose for assistive technology. It does not add captions to the video. loading="lazy" can defer loading until the frame approaches the viewport. The CSS aspect-ratio keeps a suitable player shape as its width changes.
Many pages block embedding. A working link to a website does not guarantee that it can be shown inside an iframe. Keep an ordinary viewing link available.
An external player can contact a third party and load its resources. A privacy-enhanced embed is not a guarantee of no data collection. For a live site, consider a click-to-load approach and review the provider’s behaviour and your site’s privacy requirements.
07 | PLAYBACK, FILES AND PERFORMANCE
Avoid automatic sound. autoplay requests automatic playback, but browsers can restrict it. Muted autoplay may be permitted in some situations; permission does not make it the best learning experience.
Use a short, relevant clip and an appropriate resolution. Large files cost bandwidth and can make a page slow. Consider preload="none" or metadata for local players, and lazy loading for suitable embeds.
If playback fails, check the path, filename case, file format, encoding and server response. If captions fail, check the track path and WebVTT syntax. Test captions through a local web server or hosted site because local-file restrictions can affect loading.
Use media you own or have permission to publish. Embedding a video and copying its file onto your server are different actions. Follow the provider’s terms and the rights holder’s permissions.
08 | BUILD A MEDIA SECTION THAT STILL MAKES SENSE
- Introduce the media and explain what learners should notice.
- Use visible playback controls and avoid surprise audio.
- Provide checked captions where speech or relevant sounds need them.
- Include a transcript or descriptive alternative suited to the content.
- Keep a direct viewing or file link outside the player.
- Test on a narrow screen, with a keyboard and with sound unavailable.
Ask a partner to explain the main idea without playing the video. If the essential information disappears, improve the surrounding explanation and alternatives.