Skip to main content

How to Embed Music/Video Player in Docusaurus Page

Everyone knows that you can write React code in Docusaurus, so I found such a solution on Stack Overflow. Those who want to see the original text can look at this: Docusaurus 2 inclusion of a video file in a markdown file

Here is the translated version

Install react-player

npm install react-player

Import dependencies in your .mdx file

import ReactPlayer from 'react-player'

Then add the video link as shown in the code below

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

If you only have audio, you can do this:

<ReactPlayer playing forceAudio controls url='xxx.mp3' />

If you feel you need more features, you can check the official documentation of react-player.

Here is the translated version