我期望视频在我的代码库中(例如src="./assets/my-video.mp4" type=video/mp4)。
有此问题的讨论,但我没有找到一个简单的示例来引用视频。
您需要安装react-player
,创建一个扩展名为.mdx
的文件并添加视频。
1) 安装 react-player
:
npm install react-player
2) 在您的文件中,例如 Intro.mdx
,在顶部插入(如果存在,则在---
下面):
import ReactPlayer from 'react-player'
然后在想要放置视频的位置插入视频:
<ReactPlayer playing controls url='video.mp4' />
重要提示
我在尝试使用相对路径渲染视频时遇到了一些问题。所以最好将它们放在 static
文件夹中,然后使用 <ReactPlayer playing controls url='/video.mp4' />
进行调用(注意文件名前的 /
)。
我忘记将扩展名更改为 mdx
。但是它与扩展名为 md
的文件一样正常工作。
参考资料
注意:使用参考资料 #3 了解更多关于 react-player 的内容!你可以在视频播放器上使用很多酷炫的东西。
免责声明
像 endiliey 在你的参考链接中所说的那样,对于熟悉这项技术的人来说,这非常容易。但这不是我的情况...但学习它很有趣!
react-player
库,但你也可以使用video
标签。
<video controls>
<source src="./up%20nd%20down.mp4"/>
</video>
<video controls>
<source src="./up and down.mp4"/>
</video>
import upAndDownURL from './up and down.mp4';
<video controls>
<source src={upAndDownURL}/>
</video>
注意!import upAndDownURL from './up%20and%20down.mp4';
是无法工作的。
myVideo.avi
需要放置在 <project_root>/static
文件夹下。
<video controls>
<source src="/myVideo.avi"/>
</video>
这是对@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';
这里有一个响应式选项
通过运行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>
.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",
},
},
}}
我无法评论,但是补充一下上面的答案,你可以将其视为HTML文件,在<video controls>
控件之后,可以添加宽度、高度、样式...
<video controls width="90%">
<source src="/uploads/VideoName.mp4"/>
</video>
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/lHu02MWIPUY"
frameborder="0"
allow="autoplay; encrypted-media"
allowfullscreen>
</iframe>