博客内嵌入Bilibili视频
博客内嵌入Bilibili视频
Ramsayi一、原理
使用 iframe 标签，更改其中 src 对应 bilibili 视频的 aid 和 cid，组装新的 HTML 源码，即可在文章内嵌入 bilibili 视频。
二、获取 aid 和 cid
aid 为视频的 av 号，但是每个 av 号下不一定只有 1p，所以 B 站用 cid 来管理视频的真正 id，那么也可以说如果视频只有 1p，那么 cid 就无用了，我测试直接填 1 也是可以的。
我们在转发视频的时候直接可以看到嵌入代码
这是官方准备的嵌入代码，可以直接拿来用，但是显示效果不是很理想，样式不是我们希望的，需要调整一下。
1 | <iframe src="//player.bilibili.com/player.html?aid=80241883&bvid=BV15J411s7SZ&cid=169757174&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe> |
从嵌入代码中我们直接得到了 aid 和 cid
我们重新设置一下功能、大小、样式，得到可用的 HTML 代码
1 | <iframe src="//player.bilibili.com/player.html?aid=80241883&bvid=BV15J411s7SZ&cid=169757174&page=1" scrolling="no" frameborder="no" width="95%" height="600"></iframe></p> |
以后插入需要的 bilibili 视频只需要改变上面的 aid 和 cid 就可以了！
三、移动端适配
1 | <div style="position: relative; padding: 30% 45%;"> |
可以用这个代码作为样板，以后只需要改变 src 的 id 好就可以了！
四、参数说明
本来这篇博客是我的游戏之作，但没想到捧场的朋友这么多，我看到评论区有朋友讲清晰度的问题，我这里再说一下几个参数。
1 | https://player.bilibili.com/player.html?cid=169757174&aid=80241883&page=1&as_wide=1&high_quality=1&danmaku=0 |
| key | 说明 |
|---|---|
| aid | 视频 ID 就是 B 站的 avxxxx 后面的数字 |
| cid | 应该是客户端 id, clientId 的缩写(推测的, 不一定准确) 经过测试, 这个字段不填也没关系 |
| page | 第几个视频, 起始下标为 1 (默认值也是为 1) 就是 B 站视频, 选集里的, 第几个视频 |
| as_wide | 是否宽屏 1: 宽屏, 0: 小屏 |
| high_quality | 是否高清 1: 高清, 0: 最低视频质量(默认) 如视频有 360p 720p 1080p 三种, 默认或者 high_quality=0 是最低 360p high_quality=1 是最高 1080p |
| danmaku | 是否开启弹幕 1: 开启(默认), 0: 关闭 |
所以只要设置high_quality=1就能开启最高画质了。
B 站官方并没有给出文档说明…..但我发现论坛上有一些相关的讨论
经测试 high_quality 参数可以正常使用，此参数控制外链播放器的默认清晰度：
=1 时默认清晰度是最高非大会员清晰度，例如：
（1）原视频清晰度有 360P、480P、720P，外链播放器默认为最高的 720P，
（2）原视频清晰度有 360P、480P、720P、1080P，外链播放器默认为最高的 1080P，
（3）原视频清晰度有 360P、480P、720P、1080P、1080P+，外链播放器默认为 1080P，
选择其他清晰度会打开原视频页面，
=其他数值或没有此参数时默认清晰度是 360P，选择其他清晰度会打开原视频页面。
五、示例
1 | <div style="position: relative; padding: 30% 45%;"> |
