视频
了解如何使用 Markdown 或 Video 组件在 Jamdesk 中嵌入 MP4 和 WebM 视频,并配置自动播放、循环和控件等属性。
请将 .mp4 或 .webm 文件存放在项目中的 /videos 目录下,然后直接引用即可。Jamdesk 会渲染一个带有控件、圆角和统一间距的 HTML5 播放器。
屏幕截图显示的是英文界面。
Markdown 语法
用于图片的  语法同样适用于视频文件。Jamdesk 会检查文件扩展名,并渲染视频播放器而不是 <img loading="lazy"> 标签:

你将获得一个标准播放器,包含播放/暂停、音量、进度条和全屏功能。使用 <Video> 组件可以控制播放(自动播放、循环、静音)。
Video 组件
<Video> 组件将 HTML5 视频属性作为属性(props)公开:
<Video src="/_jd/videos/never-gonna-give-you-up.mp4?v=mwdojjfh" title="Rick Astley" />
title 属性会为视频元素设置 aria-label。屏幕阅读器会朗读该标签。请始终包含此属性。
Props
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
src | string | 无 | 必填。 视频文件的路径。 |
title | string | 无 | 供屏幕阅读器使用的无障碍标签。 |
controls | boolean | true | 显示浏览器内置的播放器控件。 |
autoPlay | boolean | false | 视频可见时立即开始播放。 |
muted | boolean | false | 以静音状态开始播放。 |
loop | boolean | false | 视频结束时从头重新播放。 |
width | string | 无 | CSS 宽度值(例如 "400px"、"100%")。 |
height | string | 无 | CSS 高度值。 |
替换 GIF
一段 5 秒的 UI 录屏保存为 GIF 可能达到 10MB,而保存为 MP4 则可以控制在 500KB 以内。请用无声、循环的视频替代 GIF,并隐藏播放器控件:
<Video src="/_jd/videos/ui-demo.mp4?v=mwdojjfh" autoPlay muted loop controls={false} />
效果与 GIF 相似(内联播放、无限循环、无控件)。加载更快,并且在任何分辨率下都能保持清晰。
浏览器会阻止未静音的自动播放。设置了 autoPlay 但未设置 muted 的视频将无法播放,它会停留在第一帧且不会报错。使用 autoPlay 时请始终设置 muted。
支持的格式
| 格式 | 扩展名 | 浏览器支持 |
|---|---|---|
| MP4 (H.264) | .mp4 | 所有浏览器,包括 Safari 和 iOS |
| WebM (VP9) | .webm | Chrome、Firefox、Edge。在相近画质下文件更小 |
MP4 是安全的默认选择,所有浏览器和设备都支持播放。WebM 生成的文件更小,但 Safari 和 iOS 不支持播放 WebM,使用 Apple 设备的读者将看不到视频。
视频文件最大可达 100MB。对于超过几分钟的内容,请托管在 YouTube 上,并改用 <YouTube> 组件。专为视频设计的 CDN 传输速度远快于文档站点直接提供大文件的速度。
