B站官方的嵌入代码又长又难记,这个站点配了一个短代码,一行就够了。
最快用法
把下面这行写进 Markdown(BV 号换成你自己的):
{{< bilibili BV1GJ411x7h7 >}}
渲染出来是这样:
BV 号在视频页地址栏里,形如 https://www.bilibili.com/video/BV1GJ411x7h7/,
也可以直接写 av 号:{{< bilibili av170001 >}}。
⚠️ 位置写法只能单独用。一旦要带其它参数,就必须写成
id="BV..."—— 这是 Hugo 的规则,不允许位置参数和命名参数混用。
参数
| 参数 | 说明 | 默认值 |
|---|---|---|
id | BV 号或 av 号,也可以直接写在第一个位置 | 必填 |
page | 分P,第几个 P | 1 |
danmaku | 弹幕开关,1 开 0 关 | 0 |
autoplay | 自动播放,1 开 | 0 |
muted | 静音,默认跟随 autoplay | 自动 |
ratio | 画面比例 | 16/9 |
title | iframe 的无障碍标题 | 哔哩哔哩视频 |
几个组合(下面是示例代码,不会真的插入视频):
{{< bilibili id="BV1GJ411x7h7" page=2 >}}
{{< bilibili id="BV1GJ411x7h7" danmaku=1 autoplay=1 muted=1 >}}
{{< bilibili id="BV1GJ411x7h7" ratio="4/3" title="课程讲解" >}}
想开弹幕看看实际效果:
写文档时的一个坑
Hugo 对代码块里的 shortcode 也会执行,所以上面那些示例必须写成转义形式, 否则会真的插进去一个播放器:
{{< bilibili BV1xx >}}
看到的那对 /* */ 就是转义标记,页面上会显示成正常的短代码写法,方便复制。
几个必须知道的点
- 未登录访客大概率只能看 360P / 480P。这是 B站对嵌入播放器的限制,不是配置错了。想要高清得在 B站点登录账号,但访客看不到你的登录态。
- 播放器右上角会有"去B站看"和推荐浮层,官方嵌入代码去不掉。
autoplay在手机上基本会被浏览器拦掉,这是浏览器的自动播放策略,不是代码问题。- 视频必须用 https 播放器地址,本站已经写死了
https://,不要手动改成//或http,否则在 https 站点上会被浏览器拦成混合内容,白屏。
如果 shortcode 不好使
也可以用主题自带的 rawhtml 短代码直接贴官方嵌入代码:
{{< rawhtml >}}
<iframe src="https://player.bilibili.com/player.html?bvid=BV1GJ411x7h7&page=1&high_quality=1&danmaku=0"
width="100%" height="500" scrolling="no" frameborder="0" allowfullscreen="true"></iframe>
{{< /rawhtml >}}
这样写不会有自适应比例,手机上可能变形,所以还是推荐上面的 bilibili 短代码。