哔哩哔哩视频插入网页 iframe播放器全网最详细使用教程

终于决定重新开始运营小站了,事实上这段时间我并没有虚度,你可以在我的 TG 频道 里看到我的动态

目录树

• 我们该如何使用哔哩哔哩自带的iframe播放器？
• 改进哔哩哔哩iframe播放器
• 解决手机端比例不正常的问题
• 让你的哔哩哔哩iframe播放器更加清爽
• 最终版改进代码保姆级使用教程 最终版在这！！！
• 哔哩哔哩iframe播放器中的常用参数及使用教程
• 参考资料

但是，这却有一个致命缺点：我们大部分的人搭建博客都是出于爱好，不可能每个人手上都有一台几百兆带宽的国内服务器或者购买了国内 CDN ，如果将视频塞在自己的服务器话，其效果反而不如文字：文字至少还能看，但视频连看都看不了

那我们应该怎么办能？

bilibili 给出了它的答案：我们有 哔哩哔哩iframe播放器 ，可以免费把你的视频显示在网站上！而且不卡顿！

我们该如何使用哔哩哔哩自带的iframe播放器？

很简单：我们只需要 使用网页版 b站 打开一个视频 然后 点击下方的分享按钮 最后点击 嵌入代码 即可一键复制该视频的嵌入代码啦！然后我们就可以直接在 HTML 或者是 MARKDOWN 里复制粘贴使用啦！

图片演示：

效果演示：

当然，这其实并不是很好
为什么？因为官方所提供的代码并没有对高与宽的配置，所以有时候会看起来怪怪的，对于某些网站来说，他可能会显示的过小，或者太靠一边之类的

改进哔哩哔哩iframe播放器

先来看看官方给到的代码

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

emmm，一言难尽
可以看到，官方非常懒，连个自适应都懒得做
那我们就略微改进一下吧

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

我们来尝试一下吧！

改进代码 0.1 版本

如果你是电脑端端用户，你应该会感觉这很不错，视频盛满了整个屏幕，十分理想
但是要记住： 手机端也是浏览大户之一，我们应该去看看手机组的表现

手机组表现：

果不其然，手机组果然没让我们失望，他又给我们出了一道难题：手机端直接把视频从横屏变成竖屏了。不过好在视频内容并没有因此而变形，视频实际比例还是正常的，只不过外框 、稍微大了那么一内内

解决手机端比例不正常的问题

实际上，对于这个比例不正常，我猜一定会有人喜欢这种竖屏模式：因为他仅仅只是外框大了一圈而已，内容还是以正常比例播放，对于已经习惯了短视频的竖屏模式的人们来说，这也没什么不便之处

当然，如果您一定要把这个问题给解决了，那么我们可以引用一位大佬给出的答案

来自 ExperDot 大佬给出的解决方案：

<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=928861104&bvid=BV1uT4y1P7CX&cid=287639008&page=1" frameborder="no" scrolling="no"></iframe>
</div>

这时候我们的视频就完美的以我们想要的比例出现在我们的面前了

改进代码 0.2 版本演示

这时候即使是手机端也会以正常的视频比例显示

芜湖！
在解决了一系列问题后，你是否感觉你的 哔哩哔哩播放器 可以实装进你的网站里了吗？
那么我来给你看张图片吧

这是pc端上改进代码实现效果
而红色框框圈起来的，则是能够点击进入b站的区域
是不是觉得有些臃肿了？

让你的哔哩哔哩iframe播放器更加清爽

事实上，只要细心观察，就能发现：哔哩哔哩的 pc 端 iframe 播放器十分臃肿且宣传要素过多，而移动端的却异常清爽，连个广告都没有的那种

那我们实际上只需要将 pc 端的 iframe 播放器强制给改成移动端端播放器，那不就解决了吗？

于是我们就可以取出刚才最终版的改进代码：

<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=928861104&bvid=BV1uT4y1P7CX&cid=287639008&page=1" 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="//www.bilibili.com/blackboard/html5mobileplayer.html?aid=928861104&bvid=BV1uT4y1P7CX&cid=287639008&page=1" frameborder="no" scrolling="no"></iframe>
</div>

实际上就是把源代码 src="" 里的链接里的 //player.bilibili.com/player.html 换成了 //www.bilibili.com/blackboard/html5mobileplayer.html 而已，其余的代码一动都没动

那我们来看下效果吧

究极无敌超级清爽之哔哩哔哩iframe播放器改进版——终极版：

是不是特别清爽？但是分辨率依然没有就了，但都成这样了，要啥自行车？

最终版改进代码保姆级使用教程

<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这里填写你自己的" frameborder="no" scrolling="no"></iframe>
</div>

这串代码，复制，黏贴到你的编辑器内

然后照最上面的教程，获取你需要的b站视频的嵌入链接
例如

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

找到 src="" 里的内容
//player.bilibili.com/player.html?aid=928861104&bvid=BV1uT4y1P7CX&cid=287639008&page=1

去掉前面的 //player.bilibili.com/player.html
?aid=928861104&bvid=BV1uT4y1P7CX&cid=287639008&page=1

黏贴替换到代码中 "这里填写你自己" 的部分

<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=928861104&bvid=BV1uT4y1P7CX&cid=287639008&page=1" frameborder="no" scrolling="no"></iframe>
</div>

完成 ✅

哔哩哔哩iframe播放器中的常用参数及使用教程

常用参数

使用方法：

看了许多参考资料，都没有对参数的使用方法作介绍，所以我就给大家介绍一下

就拿

<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=928861104&bvid=BV1uT4y1P7CX&cid=287639008&page=1" frameborder="no" scrolling="no"></iframe>
</div>

举个栗子吧
首先你要保证你已经完成了代码的黏贴
然后找到代码里 src="" 里的链接
我这里是 //www.bilibili.com/blackboard/html5mobileplayer.html?aid=928861104&bvid=BV1uT4y1P7CX&cid=287639008&page=1

比如，你想把弹幕关闭，这时候我们从上表格得知，弹幕关闭的参数是 danmaku ，如果要关闭，那就得添加参数 danmaku=0 才行

那该如何添加参数呢？
很简单，看到上面的链接了吗？在该链接的最后加上一个 & 符号，然后再将 danmaku=0 黏贴上去即可

于是我们得到了
//www.bilibili.com/blackboard/html5mobileplayer.html?aid=928861104&bvid=BV1uT4y1P7CX&cid=287639008&page=1&danmaku=0

再以此类推，我们就可以对其他参数进行设置
请注意，这里的参数中，1代表开启，0代表关闭

比如，我们想让该视频在 42.2 秒时开始播放，于是我们就可以通过 t 参数，以同样的方法在链接尾添加一个 & 与 t=42.2
//www.bilibili.com/blackboard/html5mobileplayer.html?aid=928861104&bvid=BV1uT4y1P7CX&cid=287639008&page=1&danmaku=0&t=42.2

然后，我们把链接替换回源码内，即可让上面添加的两条参数生效

是不是很好玩？
好玩就对了！

参考资料

注意：本文的实质知识虽是参考别的网站，但是本文是建立在源资料上由本人完全自主撰写，比原来的资料覆盖面更加全面，也是付出了我的一番心血
所以如果您想支持我，还望积极地在评论区里讨论，谢谢支持！

泽泽社： 使用更干净的哔哩哔哩iframe播放器

王陸： 关于博客园内嵌入bilibili视频

下次再会！