莓说-如何在自己的网页项目中添加B站外链

如题，小莓最近迷上了大人们在很久以前的高科技产品-电脑，她发现了大人们当时很喜欢的视频网站-哔哩哔哩，并惊人地发现竟然还在运营？！（可能是叫龙公主也很喜欢吧，大概 ），于是她想在自己的网页项目中添加B站上自己喜欢的视频，但是苦于多达百兆的下载视频所带来的成本，因此她想要通过外链挂载的方式进行插入，聪明的她很快找到了方法：

1.将下方代码插入至文件中（自定义直链需要用到，下方官方嵌入代码可以不需要添加）

/*视频挂载*/
.iframe_video {
    position: relative;
    width: 100%;
}

@media only screen and (max-width: 767px) {
    .iframe_video {
        height: 15em;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .iframe_video {
        height: 20em;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .iframe_video {
        height: 30em;
    }
}

@media only screen and (min-width: 1200px) {
    .iframe_video {
        height: 40em;
    }
}

.iframe_cross {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%
}

.iframe_cross iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}

2.在网页端点开自己要插入的视频，点击分享，在弹出的框中勾选“嵌入代码”（官方嵌入代码）

得到下方代码：

<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=3717165&bvid=BV1is411X7wh&cid=5955998&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>

将其插入到html文件中即可。

但小莓还想要获取视频的更多信息，于是利用起来了以下接口： 

https://api.bilibili.com/x/web-interface/view?bvid=BV号

BV号是B站向用户标识视频的唯一编码，B站于2020年3月正式放弃沿用了近10年的av号（ACG video）转用BV号（Bilibili video）代替，20年以前的av号可以先在B站中打开再重新获取。

如图所示，嵌入代码所需的aid和cid均可在其中找到

承接上文，在自定义直链中，替换掉aid和cid即可：

https://player.bilibili.com/player.html?aid=   &cid=   &page=1

可是，小莓又发现一个问题，插入的视频会自动播放，还会开启弹幕？在这个时代，浪费宝贵的资源可是不行的，因此要想办法关闭它们！ 

https://player.bilibili.com/player.html?aid=   &cid=   &page=1&autoplay=0&danmaku=0&high_quality=0

如上所示，在链接后添加&autoplay属性，值为0自动不播放，为1自动播放。在&danmaku属性中，为0是关闭，为1是开启。在&high_quality属性中，为1是最高画质，为0是最低画质。同理，在官方的直链中，直接在链接后添加即可。

此外，iframe中还有其它参数设置，如：

allowfullscreen="allowfullscreen" #移动端全屏
sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts" #禁止弹出网页

另外，悄悄告诉你，api接口里面也可以找到其它更详细的信息，小莓觉得还是要靠你自己挖掘啦~