Docusaurus 2 如何在 Markdown 文件中插入本地视频文件

Docusaurus 的 Markdown 渲染器原生支持 HTML 标签，无需安装额外插件，直接使用 HTML5 <video> 标签即可插入本地视频，参考实现如下：

<video 
  width="100%" 
  controls 
  preload="auto"
  poster="./assets/video-cover.png"
>
  <source src="./assets/my-video.mp4" type="video/mp4" />
  您的浏览器不支持HTML5视频播放，请升级浏览器。
</video>

常用配置说明 #

• controls：启用播放、进度条、音量等视频控制按钮，必加
• width="100%"：适配文档容器宽度，可自定义固定像素值
• preload="auto"：页面加载时自动缓冲视频，可改为metadata仅缓冲元数据，或者none不预缓冲
• poster：可选配置，配置视频播放前的封面图路径
• 路径规则和你在 Docusaurus 中插入本地图片的规则完全一致：
  • 视频放在当前 Markdown 文件同级的assets目录下，直接使用./assets/my-video.mp4即可
  • 如果视频放在项目根目录的static/videos目录下，直接写绝对路径/videos/my-video.mp4即可
  • 如果 Markdown 文件和视频目录不在同一层级，按需调整相对路径的层级即可

额外适配建议 #

如果需要适配 Docusaurus 的明暗双主题，可以给<video>标签添加自定义 class，配合项目的自定义 CSS 文件调整视频边框、背景等样式即可。

内容的提问来源于stack exchange，提问作者Mark Underseth