关于博客园内嵌入bilibili视频

雨点打透心脏的1/2处 2023-07-21 08:37 16阅读 0赞

###### 原文：[https://www.cnblogs.com/wkfvawl/p/12268980.html][https_www.cnblogs.com_wkfvawl_p_12268980.html] ######

## 一、原理 ##

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

## 二、获取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=’ 就可以了。

### 方法二(推荐) ###

我们在转发视频的时候直接可以看到嵌入代码

![1358881-20200206150838006-392318847.png][]

这是官方准备的嵌入代码，可以直接拿来用，但是显示效果不是很理想，样式不是我们希望的，需要调整一下。

从嵌入代码中我们直接得到了aid和cid

我们重新设置一下功能、大小、样式，得到可用的HTML代码

以后插入需要的bilibili视频只需要改变上面的aid和cid就可以了！

## 三、移动端适配 ##

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

![1358881-20200217230556219-1666126249.png][]

大佬已经给出了解决方案

可以用这个代码作为样板，以后只需要改变src的id好就可以了！

再次感谢大佬**[ExperDot][]**的帮助！

## 四、嵌入方法 ##

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

![1358881-20200206151748141-1744878901.png][]

![1358881-20200206153114389-1534665027.png][]

## 五、参数说明 ##

看到评论区有朋友讲清晰度的问题，我这里再说一下几个参数。

https://player.bilibili.com/player.html?cid=145147963&aid=84267566&page=1&as_wide=1&high_quality=1&danmaku=0

<table> 
 <thead> 
  <tr> 
   <th align="center">key</th> 
   <th align="center">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">aid</td> 
   <td align="center">视频ID<br>就是B站的 avxxxx 后面的数字</td> 
  </tr> 
  <tr> 
   <td align="center">cid</td> 
   <td align="center">应该是客户端id, clientId 的缩写(推测的, 不一定准确)<br>经过测试, 这个字段不填也没关系</td> 
  </tr> 
  <tr> 
   <td align="center">page</td> 
   <td align="center">第几个视频, 起始下标为 1 (默认值也是为1)<br>就是B站视频, 选集里的, 第几个视频</td> 
  </tr> 
  <tr> 
   <td align="center">as_wide</td> 
   <td align="center">是否宽屏<br>1: 宽屏, 0: 小屏</td> 
  </tr> 
  <tr> 
   <td align="center">high_quality</td> 
   <td align="center">是否高清<br>1: 高清, 0: 最低视频质量(默认)<br>如视频有 360p 720p 1080p 三种, 默认或者 high_quality=0 是最低 360p<br>high_quality=1 是最高1080p</td> 
  </tr> 
  <tr> 
   <td align="center">danmaku</td> 
   <td align="center">是否开启弹幕<br>1: 开启(默认), 0: 关闭</td> 
  </tr> 
 </tbody> 
</table>

所以只要设置**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，选择其他清晰度会打开原视频页面。

## 六、示例 ##

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

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

[https_www.cnblogs.com_wkfvawl_p_12268980.html]: https://www.cnblogs.com/wkfvawl/p/12268980.html
[1358881-20200206150838006-392318847.png]: /images/20230528/4a6db309c4a7478d9743462017f07dc4.png
[ExperDot]: https://www.cnblogs.com/experdot/
[1358881-20200217230556219-1666126249.png]: /images/20230528/a5a850776d57426e90272c4e2203f64f.png
[1358881-20200206151748141-1744878901.png]: /images/20230528/c24dcca32d1e4e37a56f90a08d9e48e2.png
[1358881-20200206153114389-1534665027.png]: /images/20230528/aa01e4d273414c6a8d3f6b6a5982e4e1.png