Docusaurus 2 inclusion of a video file in a markdown file

user_16909933 0
Viewed 2652

Using Docusaurus for help documentation. I can include images, gifs, and reference a youtube video (use iframe). But it is not clear to me how to include a video in a markdown file.

I am expecting the video to be in my repo (i.e. src="./assets/my-video.mp4" type=video/mp4").

There has been discussion on this issue, but I have not been able to find a simple example referencing a video.

docusaurus markdown
2 Answers

You need to install the react-player, create a file with .mdx extension and add the video.

1) Install the react-player:

npm install react-player

2) In your file, for example Intro.mdx, insert at the top (bellow the --- if present):

import ReactPlayer from 'react-player'

then insert the video, wherever you want it:

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

IMPORTANT

  1. I am having some trouble trying to render videos using relative path. So maybe better putting them inside the static folder, then calling using <ReactPlayer playing controls url='/video.mp4' /> (note the / before the filename).

  2. I forgot to change the extension to mdx. But it is working fine with md extension files.

REFERENCES

  1. I followed the link you provide to learn how to do it
  2. https://github.com/facebook/docusaurus/issues/489
  3. https://www.npmjs.com/package/react-player

NOTE: Use the reference #3 to learn more about the react-player! There are a lot of cool stuff you can use on the video player.

DISCLAIMER

Like endiliey said in your reference link, it is super easy — for those who are familiarized with the technology. Which was not my case… But was fun to learn about it!

user_57340970

You can use react-player library as D.Kastier suggested, but you can also use a video tag.

0. What doesn't work

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

1. What work: Local

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

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

Careful ! import upAndDownURL from './up%20and%20down.mp4'; will not work.

2. What work: Static/Public folder

myVideo.avi need to be put under <project_root>/static folder.

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