B站官方的嵌入代码又长又难记,这个站点配了一个短代码,一行就够了。

最快用法

把下面这行写进 Markdown(BV 号换成你自己的):

{{< bilibili BV1GJ411x7h7 >}}

渲染出来是这样:

BV 号在视频页地址栏里,形如 https://www.bilibili.com/video/BV1GJ411x7h7/, 也可以直接写 av 号:{{< bilibili av170001 >}}

⚠️ 位置写法只能单独用。一旦要带其它参数,就必须写成 id="BV..." —— 这是 Hugo 的规则,不允许位置参数和命名参数混用。

参数

参数说明默认值
idBV 号或 av 号,也可以直接写在第一个位置必填
page分P,第几个 P1
danmaku弹幕开关,100
autoplay自动播放,10
muted静音,默认跟随 autoplay自动
ratio画面比例16/9
titleiframe 的无障碍标题哔哩哔哩视频

几个组合(下面是示例代码,不会真的插入视频):

{{< 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 >}}

看到的那对 /* */ 就是转义标记,页面上会显示成正常的短代码写法,方便复制。

几个必须知道的点

  1. 未登录访客大概率只能看 360P / 480P。这是 B站对嵌入播放器的限制,不是配置错了。想要高清得在 B站点登录账号,但访客看不到你的登录态。
  2. 播放器右上角会有"去B站看"和推荐浮层,官方嵌入代码去不掉。
  3. autoplay 在手机上基本会被浏览器拦掉,这是浏览器的自动播放策略,不是代码问题。
  4. 视频必须用 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 短代码。