构建 HTML 媒体播放器
发布: (2026年1月13日 GMT+8 23:00)
3 min read
原文: Dev.to
Source: Dev.to
构建 HTML 视频播放器
在过去的几天里，我完成了 freeCodeCamp 的另一个工作坊和实验室。我参加了 构建 HTML 视频播放器 工作坊，然后在昨天完成了 构建 HTML 音频和视频播放器 实验室。
这个工作坊要求你在 13 步内构建一个 HTML 视频播放器。首先会给你一些 HTML 模板，然后每一步会提供进一步的指示，以完成练习。
在前一步中提供的唯一理论课程旨在帮助你完成本课以及接下来的课程。
第 7 步介绍了 poster 元素——它允许视频在播放前显示缩略图。我之前并不了解这个元素，所以这对我来说是一个有用的提示。
后面的步骤聚焦于 source 和 type 元素。这一切都很清晰，尤其是使用 type 来确保浏览器知道所使用的格式。
在工作坊结束时，我对所有概念都感到满意，并准备好挑战实验室——构建 HTML 音频和视频播放器。
构建 HTML 音频和视频播放器
这个实验室在前一个工作坊的基础上加入了音频播放器——没有双关！我不想直接复制示例，于是选择了 Lo‑fi 视频和音频文件。最困难的部分是找到可以链接的资源。一旦解决了这个问题，完成用户故事就相对顺利。下面是最终结果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Audio and Video Lab</title>
</head>
<body>
<section id="study-with-lofi">
<h2>Study with Lofi</h2>
<section id="study-session">
<h3>Study Session</h3>
<!-- Video and audio elements would go here -->
</section>
<section id="background-lofi-music">
<h3>Background Lofi Music</h3>
<!-- Additional content -->
</section>
</section>
</body>
</html>关于响应式网页设计认证中的实验室，我一直在保存这些文件的副本并上传到 GitHub。这意味着我可以在以后随时查看它们。
在完成工作坊和实验室后，我有时间进行三节关于 使用图像和 SVG 的理论课程。我对 SVG 文件学到了很多，这对下一个需要构建心形图标的工作坊非常有帮助。下次再聊，感谢阅读！