起因

最近在写文章的时候,需要用到bilibili里的视频,就发现各种不得行,最后总结出最终版,效果也比较优秀。

经过

1.原始版本(残废)

实例代码:

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

显示效果:

但是这样的话,视频在显示出来只有一小块,也不能调节清晰度、弹幕什么的,也不能全屏,非常影响观看体验。

2.增大版本(半残)

实例代码:

<iframe src="//player.bilibili.com/player.html?aid=98850947&bvid=BV1S741117em&cid=168737249&page=1" frameborder="no" scrolling="no" width="95%" height="600"></iframe></p>

显示效果:

虽然这样可以手动调节很多东西了,但有个问题很严重,那就是移动端适配的问题,如果代码是这么部署的,移动端的体验会很差。

最终版本-示例

这里我已经调节过了清晰度和弹幕显示(默认1080p和关闭弹幕)
可以把我的代码作为模板,只要更改aid,bvid和cid就可以了。

<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=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
</div>

参数说明

key说明
aidB站已经弃用的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,
选择其他清晰度会打开原视频页面,

=其他数值或没有此参数时默认清晰度是360P,选择其他清晰度会打开原视频页面。

相关文章:关于博客园内嵌入bilibili视频


shall I compare thee to a summers day?