视频播放器

Vidstack

使用本组件前，请先在你的项目中安装 vidstack@next 包:

pnpm add -D vidstack@next

<VidStack
  src="https://files.vidstack.io/sprite-fight/720p.mp4"
  poster="https://files.vidstack.io/sprite-fight/poster.webp"
/>

<VidStack
  src="https://theme-hope-assets.vuejs.press/files/sample.mp3"
  title="VidStack 示例音频"
/>

<VidStack
  src="youtube/_cMxraX_5RE"
  title="VidStack YouTube Demo"
/>

ArtPlayer

使用本组件前，请先在你的项目中安装 artplayer@next 包:

pnpm add -D artplayer@next

<ArtPlayer
  src="https://vp-demo.u2sb.com/video/caminandes_03_llamigos_720p.mp4"
  title="ArtPlayer 示例视频"
/>

<ArtPlayer  
	src="https://vp-demo.u2sb.com/video/caminandes_03_llamigos_720p.mp4"  
	poster="/poster.svg"  
	title="ArtPlayer 示例视频"  
/>

其他配置项:

• width 视频宽度，默认 100%
• height 视频高度
• airplay 支持 AirPlay
• ratio 宽高比，默认 16：9
• autoplay 自动播放
• aspect-ratio 自适应宽高比
• auto-size 自适应大小
• auto-orientation 自动旋转
• screenshot 截图
• auto-playback 自动循环播放

Bilibili

theme hope 主题已集成 bilibili 组件，你可以直接使用:

<BiliBili  
	bvid="BV1kt411o7C3"  
	title="BiliBili 示例视频"
/>

<BiliBili  
	aid="34304064"
	cid="109293122"
	ratio="9:16"
	time="60"
	page="2"
/>

配置项:

• bvid 视频 bvid。
• title 视频标题
• page 视频分页

设置视频分 P 时，必须提供 aid 和 cid，并且可以忽略 bvid 属性。

提示

aid 和 cid 可以从b站官方api获取
https://api.bilibili.com/x/web-interface/view?bvid=<视频的bvid号>
完整示例
https://api.bilibili.com/x/web-interface/view?bvid=BV19SzgYoEDg

• width 组件宽度
• height 组件高度
• ratio 组件宽高比，默认 16:9
• autoplay 自动播放
• time 视频开始时间 (单位: 秒)
• danmaku 弹幕
• danmaku-id 弹幕 ID
• danmaku-highlight 弹幕高亮