哔哩哔哩视频嵌入最详细教程
之前图床服务出现问题导致图片无法加载，请见谅。
哔哩哔哩支持使用
iframe来嵌入视频，并且不会卡顿。
演示的视频我都添加了&muted=1参数，目的是静音播放不惊吓各位。
我们搭建一些博客或者一些别的个人网站，可能是出于兴趣爱好，并不会买一台几百兆带宽的服务器或者是购买国内CND来进行加速，如果把视频塞到自己的服务器中，那么效果肯定是不太行。
那应该怎么办呢！
不怕！哔哩哔哩在很久之前就已经支持iframe嵌入播放器了！而且支持代码一键复制，只需要把复制的代码嵌入到你的网站中即可。
然后就会得到官方给的代码：
1
<iframe src="//player.bilibili.com/player.html?aid=275949729&bvid=BV1BF411D7LZ&cid=1265069356&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>得到如下效果
修改官方代码
这玩意看起来，效果有点拉拉跨，有点一言难尽，连个自适应也没给，这么小上面还带这么多大的文字提示，视觉观感一点儿也不行，这可怎么办呀！！
别担心
一键复制的官方的东西，官方很懒这也没办法，不过咱们可以给他进行一个优化！
1
<p><iframe src="//player.bilibili.com/player.html?aid=275949729&bvid=BV1BF411D7LZ&cid=1265069356&p=1" frameborder="no" scrolling="no" width="95%" height="600"></iframe></p>只需要把官方代码src=""里面的链接替换到上方代码的src=""链接即可得到下面的效果，就可以看到现在明显的不一样了。
在这里提供一个干净的代码，只需要把链接复制进去即可使用。
1
2
// 把你拷贝的链接复制到 src=“链接”
<p><iframe src="" frameborder="no" scrolling="no" width="95%" height="600"></iframe></p>来看效果
这样看起来，感觉效果还不错，看着样子大小都还可以，感觉就可以直接拿来用了，如果只是电脑来浏览观看，那么这样已经足够了。
但是手机也是主要的浏览工具，来看一下手机版本怎么表现的。
可以看出来，手机端表现也还说得过去，这是一个横屏视频，视频比例没什么问题，就是把高度直接给用黑色填充了，这个黑色的完全没必要有，所以我们还需要对手机端进行适配才行。
解决手机端比例
对于这个比例问题，有点像抖音那种短视频的感觉，就是横屏视频在竖屏浏览的时候填充黑色，很多已经习惯了抖音的这种感觉，所以就觉得问题不大，但是我们也可以把他给进行解决。
参考ExperDot大佬给出的方案
1
2
3
<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=275949729&bvid=BV1BF411D7LZ&cid=1265069356&p=1" frameborder="no" scrolling="no"></iframe>
</div>只需要把官方代码src=""里面的链接替换到上方代码的src=""链接即可
依旧提供干净代码
1
2
3
<div style="position: relative; padding: 30% 45%;">
<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" src="" frameborder="no" scrolling="no"></iframe>
</div>效果
来看看手机端
这感觉就很完美了！！我直接奥里给太给力了吧。这样就基本实现了一整个把哔哩哔哩嵌入到网站里面的流程。
简洁优化播放器
仔细看PC端的播放器界面
艾玛这界面杂乱的，看着我都有点不想看，这么臃肿的界面很难有一直看下去的想法，所以我们可以让他变得清爽一些。
尿素过多，直接上干货
其实哔哩哔哩很🐕，把PC端的播放器做的很花里胡哨，但是在移动端，一点点儿一捏捏广告都木有！！
这不就很简单了，我们直接把移动端的播放器拿过来，在PC端上用，不就可以实现无广告的清纯界面辣！奥里给，直接上手开干。
掏出我们之前的代码
1
2
3
<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=275949729&bvid=BV1BF411D7LZ&cid=1265069356&p=1" frameborder="no" scrolling="no"></iframe>
</div>修改为
1
2
3
<div style="position: relative; padding: 30% 45%;">
<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" src="//www.bilibili.com/blackboard/html5mobileplayer.html?aid=275949729&bvid=BV1BF411D7LZ&cid=1265069356&p=1" frameborder="no" scrolling="no"></iframe>
</div>就是就是把源代码 src="" 里的链接里的 //player.bilibili.com/player.html 换成了 //www.bilibili.com/blackboard/html5mobileplayer.html 而已，其余的代码我可一点儿都没动！
上效果
哇塞塞！这效果属是不错，而且这界面确实干净整洁无异味，不是伪娘就是…咳咳说正题，这里在看KNIFE大佬写的文章的时候，发现这个代码，简单是简单，但是没有办法全屏。
想想就有点难过！如此干净的视频却没办法全屏欣赏！不答应！所以！
上 最 终 法 宝！
最终版播放器
1
2
3
<div style="position: relative; padding: 30% 45%;">
<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" src="//www.bilibili.com/blackboard/html5mobileplayer.html?aid=275949729&bvid=BV1BF411D7LZ&cid=1265069356&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
</div>干净代码
1
2
3
<div style="position: relative; padding: 30% 45%;">
<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" src="//www.bilibili.com/blackboard/html5mobileplayer.html?" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
</div>记得把?后面的链接粘贴到src中的最后面即可使用最强大的哔哩哔哩播放器了。
保姆教程 - 干净链接
你复制的链接是//player.bilibili.com/player.html?aid=275949729&bvid=BV1BF411D7LZ&cid=1265069356&p=1
你只需要把aid=275949729&bvid=BV1BF411D7LZ&cid=1265069356&p=1
复制粘贴到src="//www.bilibili.com/blackboard/html5mobileplayer.html?链接内容"
变成src="//www.bilibili.com/blackboard/html5mobileplayer.html?aid=275949729&bvid=BV1BF411D7LZ&cid=1265069356&p=1"即可
哔哩哔哩播放器参数表
| 参数用途 | 参数名 | 使用方法 |
|---|---|---|
| 是否自动播放(默认否) | autoplay | 1: 开启, 0: 关闭 |
| 默认弹幕开关(默认开启) | danmaku | 1: 开启, 0: 关闭 |
| 是否默认静音(默认否) | muted | 1: 开启, 0: 关闭 |
| 一键静音按钮是否显示(默认不显示 | hasMuteButton | 1: 开启, 0: 关闭 |
| 视频封面下方是都显示播放量弹幕量等信息(默认显示) | hideCoverInfo | 1: 开启, 0: 关闭 |
| 是否隐藏弹幕按钮（默认不隐藏） | hideDanmakuButton | 1: 开启, 0: 关闭 |
| 是否隐藏全屏按钮(默认显示) | noFullScreenButton | 1: 开启, 0: 关闭 |
| 是否开始记忆播放(默认开启) | fjw | 1: 开启, 0: 关闭 |
| 默认开始时间(默认0) | t | 直接填写数值，单位秒 |
| 是否显示高清(默认否） | highQuality | 1: 开启, 0: 关闭（貌似是无用的，各位可以试试） |
使用方法
比如使用danmaku弹幕参数 1=开启，0=关闭，我们直接在该链接的最后加上一个 & 符号，然后再将 danmaku=0 黏贴上去即可。
例如
//www.bilibili.com/blackboard/html5mobileplayer.html?aid=275949729&bvid=BV1BF411D7LZ&cid=1265069356&p=1&danmaku=0
把上面的链接复制到src中就可以实现关闭弹幕播放(有弹幕按钮后续想看可以开开)
可以添加多个参数，使用?隔开
//www.bilibili.com/blackboard/html5mobileplayer.html?aid=275949729&bvid=BV1BF411D7LZ&cid=1265069356&p=1&danmaku=0?&muted=1
参考
注：本文参考了一些别的博主写法，全文文字以及展示都是由个人撰写，文章通俗易懂也更加全面。