博客嵌入自适应 B 站视频

博客嵌入自适应 B 站视频

请注意,本文编写于  107  天前,最后修改于  106  天前,其中某些信息可能已经过时。

如何嵌入 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,
选择其他清晰度会打开原视频页面,

参考文章

  1. 关于博客园内嵌入bilibili视频

本文由 Sanarous 创作,如果您觉得本文不错,请随意赞赏
采用 知识共享署名4.0 国际许可协议进行许可,转载前请务必署名
本文链接:https://bestzuo.cn/posts/blog-bilbli.html
最后更新于:2020-07-10 12:00:23

切换主题 | SCHEME TOOL  
>