视频教程

视频教程

视频教程适合用于展示操作流程、产品演示、课程讲解或复杂步骤说明。一个好的视频教程不仅需要可播放的视频，还需要清晰的上下文说明，帮助读者快速理解视频目标、准备条件和关键步骤。

推荐的视频教程结构

建议每个视频教程按照以下结构组织：

1. 目标：说明本视频要解决什么问题，读者看完后能完成什么任务。
2. 准备：列出开始前需要准备的账号、工具、素材、环境或前置知识。
3. 演示：嵌入视频，并在视频前后补充关键步骤、注意事项和时间点说明。
4. 总结：回顾本教程的核心要点，并给出下一步建议。
5. FAQ：回答读者在观看或实践过程中可能遇到的常见问题。

嵌入 Bilibili 视频

可以使用 Bilibili 提供的分享代码，将 iframe 嵌入到 MDX 页面中。请将示例中的占位地址替换为真实视频地址。

<iframe
  src="https://player.bilibili.com/player.html?bvid=BVxxxxxxxxxx&page=1"
  title="Bilibili 视频教程"
  width="100%"
  height="480"
  allow="fullscreen"
  allowfullscreen
></iframe>

嵌入 YouTube 视频

YouTube 视频通常使用 https://www.youtube.com/embed/视频ID 的形式嵌入。请将 VIDEO_ID 替换为真实视频 ID。

<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="YouTube 视频教程"
  width="100%"
  height="480"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  allowfullscreen
></iframe>

嵌入本地视频

如果视频文件存放在站点的静态资源目录中，可以使用 HTML 的 video 标签嵌入。建议提供 controls，让用户可以播放、暂停和调整进度。

<video controls width="100%" poster="/videos/tutorial-cover.jpg">
  <source src="/videos/tutorial.mp4" type="video/mp4" />
  当前浏览器不支持 video 标签。
</video>

示例教程模板

目标

通过本视频，你将学会如何完成一个具体任务，并理解每个关键步骤背后的原因。

准备

开始前请确认：

• 已准备好需要演示的账号或项目。
• 已安装教程中使用的工具。
• 已准备好视频中会用到的素材或示例数据。

演示

在演示部分嵌入视频，并在视频下方补充关键时间点：

• 00:00：介绍教程目标。
• 01:30：配置演示环境。
• 04:20：完成核心操作。
• 08:10：验证结果并排查常见问题。

总结

本教程介绍了视频嵌入的常见方式，包括 Bilibili、YouTube 和本地视频。实际使用时，建议根据受众访问环境、视频平台可用性和版权要求选择合适的嵌入方式。

FAQ

为什么视频没有显示？

请检查视频地址是否正确、平台是否允许外站嵌入，以及浏览器是否拦截了第三方内容。

本地视频应该放在哪里？

通常可以放在站点的静态资源目录中，例如 public/videos/tutorial.mp4，然后通过 /videos/tutorial.mp4 访问。

推荐使用哪种视频格式？

本地视频建议优先使用 MP4（H.264/AAC），兼容性较好。必要时可以提供 WebM 等其他格式作为补充。