关于博客嵌入bilibili视频

api文档

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

注意:aid为视频的av号,但是每个av号下不一定只有1p,所以B站用cid来管理视频的真正id,那么也可以说如果视频只有1p,那么cid就无用了。

获取aid和cid

url 中av后面就是av号,或者直接点右键——查看网页源代码——ctrl+f——搜索'aid='、‘cid=’ 就可以了。

https://www.bilibili.com/video/av84267566?from=search&seid=13400362594908841480
  1. 直接转发视频的时候直接可以看到嵌入代码
<iframe src="//player.bilibili.com/player.html?aid=67675898&bvid=BV1FJ411A7mV&cid=117318217&page=2" 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>

移动端适配

上述代码固定了高度,在移动端会变形。有大佬给出解决方案,效果如下


<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=117318217&aid=67675898&page=2&as_wide=1&high_quality=1&danmaku=0" frameborder="no" scrolling="no"></iframe>
</div>

参数说明

上述url中有几个参数

keyValue
aid视频ID
cid应该是客户端id
page第几个视频, 起始下标为 1
as_wide是否宽屏 1: 宽屏, 0: 小屏
high_quality是否高清1: 高清, 0: 最低视频质量(默认),high_quality=1 是最高1080p
danmaku第几个视频, 起始下标为 1
page是否开启弹幕1: 开启(默认), 0: 关闭

所以只要设置high_quality=1就能开启最高画质了。


已有 0 条评论

    我有话说: