451 字
2 分钟
页面浏览--访问次数--
Bilibili 视频

Shirone 提供了零额外负担的 Bilibili 视频嵌入指令,支持 Facade 占位模式与视口临近预加载机制。

语法格式#

使用 ::bilibili 行级指令并配置参数:

::bilibili{bvid="BV1fK4y1s7Qf" title="演示视频" p=1 preload="auto"}

渲染效果:

演示视频Bilibili

点击封面才会真正加载 B 站播放器,在此之前页面上只存在一张海报图与播放按钮。

属性参数列表#

属性名类型是否必填默认值说明
bvidstring必填无Bilibili 视频的 BV 号(如 BV1fK4y1s7Qf)
titlestring必填无视频标题,用于可访问性描述与海报标注
pnumber可选1分 P 编号
preloadstring可选"none"预加载策略:"none"(默认纯占位)或 "auto"(视口临近预加载)

预加载策略(preload)#

  • preload="none"(默认): 首屏严格保持 0 请求。只渲染封面海报与播放按钮,读者手动点击后才加载播放器。
  • preload="auto"(视口预加载): 当视频卡片滚动进入读者视口前夕,利用交叉观察器提前初始化播放器容器与元数据,使点击播放更加即时流畅。
::bilibili{bvid="BV1fK4y1s7Qf" title="默认占位模式"}

渲染效果(默认 none):

默认占位模式Bilibili

指定分 P#

一个多 P 视频可以只嵌入其中一集:

::bilibili{bvid="BV1fK4y1s7Qf" title="第二集" p=2}

响应式排版#

外层容器统一锁定 16:9 标准比例,在桌面端与移动端均自适应缩放,绝不撑破文章排版。

场景建议
正文核心演示视频preload="auto"
文末延伸观看省略 preload(默认 none)
多 P 系列按需指定 p

第 26 篇,共 30 篇本文属于系列

Bilibili 视频
https://www.ariels.xyz/posts/media-bilibili/
作者
Ariel
发布于
2026-10-12
许可协议
CC BY-NC-ND 4.0

分享文章

生成精美分享图或复制链接,与更多人分享本文。

继续阅读

沿着主题读

基于共同的标签与分类

换条路线

从其他文章中稳定抽取

评论

正在加载评论...