HTML 音视频：原生媒体
✏️ Editable
Loading...
Live Preview
⌘+Enter Run⌘+R Reset
About This Exercise
在这个实验中，你将学习 HTML5 原生媒体元素，无需第三方插件即可播放音视频。
原生媒体元素提供更好的性能、可访问性和 SEO。
你将学到：
- 使用
<video>嵌入视频 - 使用
<audio>嵌入音频 - 使用
<source>提供多格式支持 - 使用
<track>添加字幕
Intermediate⏱ 20-25 min
Learning Objectives
- 掌握 video 和 audio 标签的使用
- 理解媒体格式和浏览器兼容性
- 学会添加字幕和章节
- 了解媒体属性和控制
Scenario
你正在为一个在线课程平台设计视频播放页面。
需要实现：
- 视频播放器（带控制条）
- 多格式支持
- 字幕支持
- 背景音乐播放器
Why Do This
- HTML determines semantics and accessibility — it is the foundation for CSS/JS maintainability.
- Clear structure matters more than visual effects; styling and interaction will both benefit later.
- Semantic tags improve SEO, readability, and team collaboration efficiency.
Hands-on Practice
- Restructure the page using semantic tags.
- Check that heading levels are sequential (h1 -> h2 -> h3).
- Add accessibility attributes to key elements.
Common Mistakes
- Using div for everything without semantic layering.
- Heading levels are chaotic, making the page structure unreadable.
- Forms and media elements missing required attributes.
Deliverable
A semantic page skeleton template (structural sections + heading hierarchy + a11y checklist).
My Progress
Completed Steps0 / 4
Total Attempts0
Best Score0%
Completion Criteria (Checkable)
Confirm before completing this Lab
Reflection Questions (Recommended)
What was the most important semantic structure change you made?
What accessibility details did you add?
How reusable is this HTML structure?
Tags
HTML5VideoAudioMedia