视频组件 - DocVideoLink

该组件支持多种主流视频平台的视频嵌入，并允许通过自定义链接插入任意视频源。通过简洁的属性配置，可以轻松集成 YouTube、Bilibili、腾讯视频、优酷、Vimeo 等平台的视频，保证响应式设计和优质的观看体验。

• 支持多平台：内置支持 YouTubeBilibili腾讯视频优酷视频Vimeo，只需提供对应平台标识 is 和视频 ID id 即可。
• 自定义视频链接：也可直接通过 src 属性插入自定义视频链接，适用于 MP4 文件或其他视频源。
• 响应式设计：自动适配不同屏幕尺寸，兼容移动端与桌面端，保证视频比例和显示效果。
• 使用简便：清晰的属性接口，无需额外配置，快速嵌入视频。

组件引入示例

.vitepress/theme/index.ts

import DefaultTheme from 'vitepress/theme'

import { DocVideoLink } from '@theojs/lumen'

export default {
  extends: DefaultTheme,
  enhanceApp: ({ app }) => {
    app.component('Vid', DocVideoLink)
  } 
}

使用示例

TIP

只需传入平台标识 is 和视频 ID id 即可实现视频嵌入。未传 is 默认使用 YouTube。

<!-- YouTube 视频 -->
<Vid id="dQw4w9WgXcQ" />
<!-- 指定平台 -->
<Vid id="dQw4w9WgXcQ" is="youtube" />

<!-- Bilibili 视频 -->
<Vid id="BV1if421Q7mL" is="bilibili" />

<!-- 腾讯视频 -->
<Vid id="y0035f2sc4s" is="tencent" />

<!-- 优酷视频 -->
<Vid id="XNTE5NTc3NjIwMA==" is="youku" />

<!-- Vimeo 视频 -->
<Vid id="76979871" is="vimeo" />

自定义视频链接示例

<!-- 其他视频平台嵌入 -->
<Vid src="https://geo.dailymotion.com/player.html?video=x7z0ovx" />

<!-- 直接嵌入 MP4 视频 -->
<Vid src="https://media.w3.org/2010/05/sintel/trailer.mp4" />

数据接口说明

属性	类型	说明
id	string	视频唯一标识符，仅在指定 is 时必需，表示平台视频 ID。
is	'youtube' | 'bilibili' | 'tencent' | 'youku' | 'vimeo'	视频平台类型，默认使用 YouTube。
src	string	自定义视频链接，未指定 is 和 id 时使用。