Docusaurus 2 在降价文件中包含视频文件

Question

使用 Docusaurus 获取帮助文档。我可以包含图像、GIF 和参考 youtube 视频（使用 iframe）。但我不清楚如何在降价文件中包含视频。

我希望视频出现在我的存储库中（即 src="./assets/my-video.mp4" type=video/mp4"）。

已经在this issue 上进行了讨论，但是我找不到引用视频的简单示例。

Answer 1

您需要安装react-player，创建一个扩展名为.mdx的文件并添加视频。

1) 安装react-player：

npm install react-player

2) 在您的文件中，例如Intro.mdx，在顶部插入（如果存在，请在--- 下方插入）：

import ReactPlayer from 'react-player'

然后将视频插入到您想要的任何位置：

<ReactPlayer playing controls url='video.mp4' />

重要

1. 我在尝试使用相对路径渲染视频时遇到了一些问题。所以最好将它们放在static 文件夹中，然后使用<ReactPlayer playing controls url='/video.mp4' /> 调用（注意文件名前的/）。

2. 我忘记将扩展名更改为mdx。但它适用于 md 扩展文件。

---

参考文献

1. 我按照您提供的链接了解如何操作
2. https://github.com/facebook/docusaurus/issues/489
3. https://www.npmjs.com/package/react-player

注意：使用参考 #3 了解更多关于 react-player 的信息！您可以在视频播放器上使用很多很酷的东西。

---

免责声明

就像 endiliey 在您的 reference link 中所说的那样，对于那些熟悉该技术的人来说，这非常容易。这不是我的情况……但了解它很有趣！