html嵌入bilibili视频

一、原理

使用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="https://player.bilibili.com/player.html?aid=808353940&bvid=BV1N34y1q7y2&cid=489396801&page=1&high_quality=1&danmaku=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</div>

四、参数说明

key

说明

aid

视频ID，就是B站的 avxxxx 后面的数字

bvid

视频的bv号

cid

应该是客户端id，clientID的缩写，经过测试，这个字段不填也没关系

page

第几个视频，起始下标为1（默认值也是1），就是B站视频，选集里的第几个视频

as_wide

是否宽屏，1：宽屏，0：小屏

danmaku

是否开启弹幕，1：开启（默认），0：关闭

high_quality

是否高清，1：高清，0：最低视频质量（默认）

关于清晰度：

从B站复制过来的iframe代码默认是不带high_quality的，并且src前面没有https:，因此如果要开启高清模式，首先要在//player前面添加https:，然后在src中添加&high_quality=1。
经测试high_quality参数可以正常使用，此参数控制外链播放器的默认清晰度： =1时默认清晰度是最高非大会员清晰度，例如： （1）原视频清晰度有360P、480P、720P，外链播放器默认为最高的720P， （2）原视频清晰度有360P、480P、720P、1080P，外链播放器默认为最高的1080P， （3）原视频清晰度有360P、480P、720P、1080P、1080P+，外链播放器默认为1080P， 选择其他清晰度会打开原视频页面， =其他数值或没有此参数时默认清晰度是360P，选择其他清晰度会打开原视频页面。

关于控制器：

经过测试，只有复制过来的iframe代码的话是不显示控制器的，可以通过在外套一层div使其变成绝对定位的方式来显示控制器。