Docusaurus 2如何在markdown文件中插入视频文件

Question

使用Docusaurus进行帮助文档编写。我可以包含图片、gif动画，并引用YouTube视频（使用iframe）。但我不清楚如何在markdown文件中包含视频。

我期望视频在我的代码库中（例如src="./assets/my-video.mp4" type=video/mp4）。

有此问题的讨论，但我没有找到一个简单的示例来引用视频。

- Mark Underseth

---

请提供足够的代码以便他人更好地理解或重现问题。 - Community

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 在你的参考链接中所说的那样，对于熟悉这项技术的人来说，这非常容易。但这不是我的情况...但学习它很有趣！

- D.Kastier

---

谢谢提供信息。是的，一旦你知道了步骤，它就相当容易。我在 mp4 文件的路径上卡住了。 - Mark Underseth

无法工作。播放按钮无法启动视频。 - Pian0_M4n

@Pian0_M4n，你把视频放在静态文件夹里了吗？我使用相对链接时遇到了问题。（请查看我的答案中的“重要”部分） - D.Kastier

感谢@D.Kastier提供的答案，这是我遵循的答案，尽管我不得不添加一些东西，因为我的BaseUrl不是'/'。我建议添加一个答案，以供那些需要相对路径的人参考。 - Omar Yafer

Answer 2

你可以像D.Kastier建议的那样使用react-player库，但你也可以使用video标签。

0. 什么不起作用

<video controls>
  <source src="./up%20nd%20down.mp4"/>
</video>
<video controls>
  <source src="./up and down.mp4"/>
</video>

1. 工作类型：本地

import upAndDownURL from './up and down.mp4';

<video controls>
  <source src={upAndDownURL}/>
</video>

注意！import upAndDownURL from './up%20and%20down.mp4'; 是无法工作的。

2. 正确方法：使用静态/公共文件夹

myVideo.avi 需要放置在 <project_root>/static 文件夹下。

<video controls>
  <source src="/myVideo.avi"/>
</video>

- Ambroise Rabier

---

这也适用于远程资源，即通过GitHub上传的视频。只需将生成的URL传递给src即可。 - Jaime Still

Answer 3

这是对@D.Kastier提供的答案的建议，我自己也使用了它。@D.Kastier正在使用reactPlayer，但在相对路径方面遇到了问题，这就是我在我的项目中解决它的方法：

重要提示

我尝试使用相对路径渲染视频时遇到了一些问题。

如果您使用@D.Kastier描述的方法，则需要添加导入语句以获取视频和/或缩略图的URL。

import ReactPlayer from 'react-player'
import MyVideoUrl from './video/myVideo.mp4';
import MyThumbnailUrl from './video/myVideo.png';

在 Reactplayer 标签中，您将像这样使用导入的 URL：

<ReactPlayer playing="true" controls url={MyVideoUrl} light={<img src={MyThumbnailUrl} alt='Thumbnail' />}/>

我在使用视频缩略图，并需要一个视频的URL。

---

虽然这与本答案关系不大，但在您的 .mdx 文件中拥有这个有用的导入也是一个好选择。

import useBaseUrl from '@docusaurus/useBaseUrl';

- Omar Yafer

Answer 4

这里有一个响应式选项

通过运行npm install react-player来安装react-player

在intro.mdx中

---
slug: /
sidebar_position: 1
---
import ReactPlayer from "react-player"

<div className="video__wrapper">
    <ReactPlayer className="video__player" controls height="100%" url="https://storage.googleapis.com/files.school-app.bujus.de/school-instructions-v2-compressed.mp4" width="100%" />
</div>

在`custom.css`中

.video__wrapper {
  position: relative;
  padding-bottom: 56.25%; /* Video aspect ratio: 100 / (16 / 9) */
}

.video__player {
  position: absolute;
  top: 0;
  left: 0;
}

您可能需要调整padding-bottom的值。计算公式在该值之外。

当您想在视频下方添加换行符时，请在</div>下方添加­{" "}。

您可能希望使用以下代码之类的内容添加缩略图图像：

config={{
  file: {
    attributes: {
      poster:
        "https://thumbnail.jpg",
    },
  },
}}

- juliushuck

Answer 5

我无法评论，但是补充一下上面的答案，你可以将其视为HTML文件，在<video controls>控件之后，可以添加宽度、高度、样式...

<video controls width="90%">
  <source src="/uploads/VideoName.mp4"/>
</video>

视频可以放在“static”文件夹内的任何文件夹中，但是我尝试从该目录向后退却无法成功。

- Alysson_Teixeira

Answer 6

你应该可以直接在mdx文件中添加一个iframe。

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/lHu02MWIPUY"
  frameborder="0"
  allow="autoplay; encrypted-media"
  allowfullscreen>
</iframe>

- Mahesh Jamdade