关于博客园内嵌入bilibili视频

1、原理

使用iframe标签，更改其中src对应bilibili视频的aid和cid，组装新的HTML源码，便可在文章内嵌入bilibili视频。

2、获取aid和cid

aid为视频的av号，可是每一个av号下不必定只有1p，因此B站用cid来管理视频的真正id，那么也能够说若是视频只有1p，那么cid就无用了，我测试直接填1也是能够的。

这里介绍两种获取aid和cid的方法：

方法一

先观察视频的URL

https://www.bilibili.com/video/av84267566?from=search&seid=13400362594908841480

 其中84267566就是av号。

或者直接点右键——查看网页源代码——ctrl+f——搜索'aid='、‘cid=’ 就能够了。

方法二(推荐)

咱们在转发视频的时候直接能够看到嵌入代码

 

这是官方准备的嵌入代码，能够直接拿来用，可是显示效果不是很理想，样式不是咱们但愿的，须要调整一下。

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

从嵌入代码中咱们直接获得了aid和cid

咱们从新设置一下功能、大小、样式，获得可用的HTML代码

<iframe src="//player.bilibili.com/player.html?aid=84267566&amp;cid=145147963&amp;page=1" frameborder="no" scrolling="no" width="95%" height="600"></iframe></p>

之后插入须要的bilibili视频只须要改变上面的aid和cid就能够了！

3、移动端适配

ExperDot大佬提出移动端出现不适配的问题，我当时其实并无考虑移动端的问题，固定了播放器的高度形成了这个问题。

 

 大佬已经给出了解决方案

<div style="position: relative; padding: 30% 45%;">
<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" src="https://player.bilibili.com/player.html?cid=145147963&aid=84267566&page=1&as_wide=1&high_quality=1&danmaku=0" frameborder="no" scrolling="no"></iframe>
</div>

能够用这个代码做为样板，之后只须要改变src的id好就能够了！

再次感谢大佬ExperDot的帮助！

4、嵌入方法

选择tinyMCE编辑器，这是博客园默认的编辑器，选择编辑html原代码，插入上面的代码便可。

 

5、参数说明

原本这篇博客是个人游戏之做，但没想到捧场的朋友这么多，我看到评论区有朋友讲清晰度的问题，我这里再说一下几个参数。

https://player.bilibili.com/player.html?cid=145147963&aid=84267566&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，选择其余清晰度会打开原视频页面。

6、示例

这里给出2020拜年祭的《万古生香》

万古千秋，代代有玲珑气象！
风云史往，页页赋秀骨生香！

 

<div style="position: relative; padding: 30% 45%;">
<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" src="https://player.bilibili.com/player.html?cid=145147963&aid=84267566&page=1&as_wide=1&high_quality=1&danmaku=0" frameborder="no" scrolling="no"></iframe>
</div>