Jamdesk Documentation logo

视频

了解如何使用 Markdown 或 Video 组件在 Jamdesk 中嵌入 MP4 和 WebM 视频,并配置自动播放、循环和控件等属性。

请将 .mp4 或 .webm 文件存放在项目中的 /videos 目录下,然后直接引用即可。Jamdesk 会渲染一个带有控件、圆角和统一间距的 HTML5 播放器。

屏幕截图显示的是英文界面。

Markdown 语法

用于图片的 ![alt](path) 语法同样适用于视频文件。Jamdesk 会检查文件扩展名,并渲染视频播放器而不是 <img loading="lazy"> 标签:

![Never Gonna Give You Up](/videos/never-gonna-give-you-up.mp4)

你将获得一个标准播放器,包含播放/暂停、音量、进度条和全屏功能。使用 <Video> 组件可以控制播放(自动播放、循环、静音)。

Video 组件

<Video> 组件将 HTML5 视频属性作为属性(props)公开:

<Video src="/_jd/videos/never-gonna-give-you-up.mp4?v=mwdojjfh" title="Rick Astley" />

title 属性会为视频元素设置 aria-label。屏幕阅读器会朗读该标签。请始终包含此属性。

Props

属性类型默认值描述
srcstring无必填。 视频文件的路径。
titlestring无供屏幕阅读器使用的无障碍标签。
controlsbooleantrue显示浏览器内置的播放器控件。
autoPlaybooleanfalse视频可见时立即开始播放。
mutedbooleanfalse以静音状态开始播放。
loopbooleanfalse视频结束时从头重新播放。
widthstring无CSS 宽度值(例如 "400px"、"100%")。
heightstring无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).webmChrome、Firefox、Edge。在相近画质下文件更小

MP4 是安全的默认选择,所有浏览器和设备都支持播放。WebM 生成的文件更小,但 Safari 和 iOS 不支持播放 WebM,使用 Apple 设备的读者将看不到视频。

视频文件最大可达 100MB。对于超过几分钟的内容,请托管在 YouTube 上,并改用 <YouTube> 组件。专为视频设计的 CDN 传输速度远快于文档站点直接提供大文件的速度。

提交前请先压缩视频。FFmpeg 和 Handbrake 等工具可以在不明显损失画质的情况下减小文件大小:ffmpeg -i input.mp4 -crf 28 -preset slow output.mp4

接下来

图片

Markdown 图片、尺寸和图注

YouTube 嵌入

YouTube 视频和 Shorts

iFrames

Vimeo、CodePen、Figma 等