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

Docusaurus 2 inclusion of a video file in a markdown file

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

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

this issue 上有讨论，但我没能找到引用视频的简单示例。

您需要安装 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. 我按照您提供的 link 学习了如何操作
  2. https://github.com/facebook/docusaurus/issues/489
  3. https://www.npmjs.com/package/react-player

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

免责声明

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

您可以按照 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。什么工作：Static/Public文件夹

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

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