博客嵌入自适应 B 站视频
1年前
超过727天
温馨提示
本文最后更新于2022年11月24日，已超过727天没有更新，若内容或图片失效，请留言反馈。
如何嵌入 B 站视频
B 站的网页版已经提供了内嵌的 iframe 代码，我们只需要一键复制后就可以直接使用。
外链的引用方式
但是 B 站提供的外链在页面上显示经常是"残废版"，而且不能调节清晰度、弹幕之类的，也不能全屏，非常影响体验。
原版链接
<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 的大小。
<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>
这样其实一般来说是够用了，但是它也有问题，就是移动端适配非常差，我们能不能搞一种更通用的引用方式呢？
自适应版
前面引那么多就是为了给出最后这个结论，当然是可以实现自适应的，代码如下，
<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，
选择其他清晰度会打开原视频页面
文章来源于:https://bestzuo.cn/posts/blog-bilbli.html
0 赞
or 打赏
喜欢就打赏一点
下一篇
