如何嵌入 B 站视频

B 站的网页版已经提供了内嵌的 iframe 代码，我们只需要一键复制后就可以直接使用。

外链的引用方式

但是 B 站提供的外链在页面上显示经常是”残废版”，而且不能调节清晰度、弹幕之类的，也不能全屏，非常影响体验。

原版链接

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

增大版本

于是就想给它增大一下，也就是用 html 的方式调一下 width 和 height 的大小。

1
<iframe src="//player.bilibili.com/player.html?aid=328334002&bvid=BV1tA411q7xi&cid=193834244&page=1" frameborder="no" scrolling="no" width="95%" height="600"></iframe></iframe>

这样其实一般来说是够用了，但是它也有问题，就是移动端适配非常差，我们能不能搞一种更通用的引用方式呢？

自适应版

前面引那么多就是为了给出最后这个结论，当然是可以实现自适应的，代码如下，

1
2
3
<div style="position: relative; padding: 30% 45%;">
<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" src="//player.bilibili.com/player.html?aid=52516662&bvid=BV1o4411E7xW&cid=91907659&page=1&as_wide=1&high_quality=1&danmaku=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
</div>

参数说明：

key 说明
aid 之前 B 站使用的 AV 号
bvid 目前的 BV 号
page 第几个视频, 起始下标为 1 (默认值也是为 1)就是 B 站视频, 选集里的, 第几个视频
as_wide 是否宽屏 【1: 宽屏, 0: 小屏】
high_quality 是否高清 【1: 高清(最高1080p) / 0: 最低视频质量(默认)】
danmaku 是否开启弹幕 【1: 开启(默认), 0: 关闭】

相关信息：

经测试 high_quality 参数可以正常使用，此参数控制外链播放器的默认清晰度： =1 时默认清晰度是最高非大会员清晰度，例如： （1）原视频清晰度有 360p、480p、720p，外链播放器默认为最高的 720p， （2）原视频清晰度有 360p、480p、720p、1080p，外链播放器默认为最高的 1080p， （3）原视频清晰度有 360p、480p、720p、1080p、1080p+，外链播放器默认为 1080p， 选择其他清晰度会打开原视频页面，