---
layout       : post
title        : "Html嵌入Bilibili视频"
subtitle     : "Emmm, good!"
date         : 2022-05-08 13:46:12
author       : "Manford Fan"
catalog      : false
header-img   : "img/post-bg-universe.jpg"
tags         :
               - Bilibili
               - B站
               - 嵌入视频
---

五一回家了一趟，春节的时候也因为疫情没能回去，所以这是继去年入职天翼以来第一次回去。一直都很担心爸妈的身体，带他们去医院做了一个全面的检查，结果尚可，二老身体还行，总结就是大病没有，但操劳一辈子，小毛病还是很多的。去了医院，就让我想到了我这一代人的身体健康状况，大部分都是处于亚健康状态，整天坐着，太缺乏运动。所以就去B站上找了一些健身视频，想着放在自己的[wiki](https://wiki.rustle.cc)上，但是字符形式的链接总没有视频形式的动作看着舒服，用着方便，就想着把B站视频嵌入到自己的网页，所幸，B站提供了内嵌代码。


## 一、原理

使用iframe标签，更改其中src对应bilibili视频的aid和cid，组装新的HTML源码，即可在文章内嵌入bilibili视频。

## 二、获取内嵌链接

如下如所示，可以通过点击分享，再点击嵌入代码，就可以获得一个可用的链接，直接放在html中即可使用。

<center><img src="https://blog.rustle.cc/img/posts/bilibili-iframe.png" width="600"></center>


如下是官方准备的嵌入代码，可以直接拿来用，但是显示效果不是很理想，样式不是我们希望的，需要调整一下。

```html
<iframe src="//player.bilibili.com/player.html?aid=425754846&bvid=BV1t3411T7k6&cid=580777276&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
```

## 三、移动端适配

```html
<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=425754846&bvid=BV1t3411T7k6&cid=580777276&page=1&as_wide=1&high_quality=1&danmaku=0" frameborder="no" scrolling="no"></iframe>
</div>
```

## 四、参数说明

|参数|功能|
|:-|:-|
|aid|视频ID 就是B站的 avxxxx 后面的数字|
|bvid||
|cid|应该是客户端id, clientId 的缩写(推测的, 不一定准确) 经过测试, 这个字段不填也没关系|
|page|第几个视频, 起始下标为 1 (默认值也是为1) 就是B站视频, 选集里的, 第几个视频|
|as_wide|是否宽屏 1: 宽屏, 0: 小屏|
|high_quality|是否高清 1: 高清, 0: 最低视频质量(默认) 如视频有 360p 720p 1080p 三种, 默认或者 high_quality=0 是最低 360p high_quality=1 是最高1080p|
|danmaku|是否开启弹幕 1: 开启(默认), 0: 关闭|
|frameborder|是否开启边框|
|scrolling|是否带滚动条|


## 五、示例

```html
<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=425754846&bvid=BV1t3411T7k6&cid=580777276&page=1&as_wide=1&high_quality=1&danmaku=0" frameborder="no" scrolling="no"></iframe>
</div>
```

<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=425754846&bvid=BV1t3411T7k6&cid=580777276&page=1&as_wide=1&high_quality=1&danmaku=0" frameborder="no" scrolling="no"></iframe>
</div>