为Hexo博客插入响应式Bilibili视频代码块

阅读数: 0次 2023-01-05

字数：1.1k字 | 预计阅读时长：4分钟

博客中有时候需要添加一些视频内容作为展示，一般使用上传到B站中的视频。

而仅仅将链接写在文中的方式太不优雅了，因此想要实现博客中包含一个可交互的视频播放模块的效果。

实现方式

首先需要去B站网页版视频链接的下方复制嵌入代码，以当时复刻自平衡莱洛三角的视频为例，如下图所示：

复制的内容为：

<iframe
  src="//player.bilibili.com/player.html?aid=777262777&bvid=BV1E14y1g7tG&cid=951767237&page=1"
  scrolling="no"
  border="0"
  frameborder="no"
  framespacing="0"
  allowfullscreen="true"
>
</iframe>

在Markdown文档中直接粘贴上面的代码，Typora会自动识别为可播放视频，生成博客后也可以正常播放，效果如下：

然而用上面的代码生成博客后视频的效果不太好，因为外链HTML没有与Hexo适配，虽然Typora中显示正常，但在网页上打开后，播放器界面靠左，而且窗口很小，并不优雅。

可以通过如下几个个操作来修改播放器样式，使得视频播放更优雅：

B站默认的嵌入代码是一个iframe，在iframe中添加css样式：
1
style="position: absolute; width: 100%; height: 100%; Left: 0; top: 0;"

在原来的iframe外面嵌套一层div，div添加样式：

1	style="position: relative; width: 100%; height: 0; padding-bottom: 75%;"

视频默认清晰度显示为360P，为改变默认播放清晰度，可以在src双引号中的内容最后添加&high_quality=1，可以改变视频播放时默认显示的视频清晰度。
现在往iframe里面加&high_quality=1这个参数已经没办法调用高清晰度的b站外链视频了。
加了这个参数之后，外链播放器上可能还会显示当前的视频清晰度是“720P”，但是目测实际上播放的视频只有最低的360P清晰度，也就是说上面显示的那个“720P”是假的。而且加了参数后外链播放器还无法切换到任意清晰度，一切换会显示“切换失败”或导致视频无法播放。
目前没有找到替代的方法，看后续这个BUG会不会被修复。

代码修改后如下：

<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
  <iframe
    src="//player.bilibili.com/player.html?aid=777262777&bvid=BV1E14y1g7tG&cid=951767237&page=1&high_quality=1"
    scrolling="no"
    border="0"
    frameborder="no"
    framespacing="0"
    allowfullscreen="true"
    style="position: absolute; width: 100%; height: 100%; Left: 0; top: 0;"
  >
  </iframe>
</div>