【问题标题】:Docusaurus 2 inclusion of a video file in a markdown fileDocusaurus 2 在降价文件中包含视频文件
【发布时间】:2021-09-23 21:51:18
【问题描述】:

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

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

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

【问题讨论】:

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

标签: markdown docusaurus


【解决方案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 文件夹中,然后使用&lt;ReactPlayer playing controls url='/video.mp4' /&gt; 调用(注意文件名前的/)。

  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 中所说的那样,对于那些熟悉该技术的人来说,这非常容易。这不是我的情况……但了解它很有趣!

【讨论】:

  • 感谢您的信息。是的,“一旦你知道这些步骤”就很容易了。我挂断了 mp4 文件的路径。
猜你喜欢
  • 2016-05-13
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-02-26
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多