想在自己的网页里放一段 B 站视频,可以嵌入它的播放器。下面保留了原来的演示和代码,先看效果,再看参数。播放器能否载入,还取决于视频本身和 B 站当前的嵌入规则。
演示与代码
<iframe src="//player.bilibili.com/player.html?aid=60016166&cid=104514776&page=1&danmaku=0" allowfullscreen="allowfullscreen" width="100%" height="500" scrolling="no" frameborder="0" sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"></iframe>
示例里的 aid、cid 和 page 对应这段视频。换视频时要换成目标视频的参数,不能只改页面上显示的标题。
几个容易混淆的参数
原记录用 danmaku=0 关闭弹幕,danmaku=1 打开弹幕;width 和 height 决定嵌入区域的尺寸,allowfullscreen 用于允许全屏。下面的旧参数笔记也留着,方便对照。
BILIBILI 地址PC端参数
&danmaku=0 (1=打开弹幕 0=关闭弹幕)
iframe 参数
allowfullscreen="allowfullscreen" #移动端全屏
sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts" #禁止弹出网页
这里纠正一下旧笔记:sandbox 是权限限制,后面的 allow-* 会逐项放开权限。示例中的 allow-top-navigation 允许导航顶层页面,所以不能把整串设置理解为“禁止所有跳转”。具体含义可以查 MDN 的 iframe 文档。
旧属性表,留作对照
下表是原文收集的属性资料,其中部分写法已过时。新页面的边框、对齐等样式优先交给 CSS,不必把表里的属性全塞进 iframe。
| 属性 | 值 | 描述 |
|---|---|---|
| align | leftrighttopmiddlebottom | 不赞成使用。请使用样式代替。规定如何根据周围的元素来对齐此框架。 |
| frameborder | 10 | 规定是否显示框架周围的边框。 |
| height | pixels% | 规定 iframe 的高度。 |
| longdesc | URL | 规定一个页面,该页面包含了有关 iframe 的较长描述。 |
| marginheight | pixels | 定义 iframe 的顶部和底部的边距。 |
| marginwidth | pixels | 定义 iframe 的左侧和右侧的边距。 |
| name | frame_name | 规定 iframe 的名称。 |
| sandbox | “”allow-formsallow-same-originallow-scriptsallow-top-navigation | 启用一系列对 <iframe> 中内容的额外限制。 |
| scrolling | yesnoauto | 规定是否在 iframe 中显示滚动条。 |
| seamless | seamless | 规定 <iframe> 看上去像是包含文档的一部分。 |
| src | URL | 规定在 iframe 中显示的文档的 URL。 |
| srcdoc | HTML_code | 规定在 <iframe> 中显示的页面的 HTML 内容。 |
| width | pixels% | 定义 iframe 的宽度。 |


您好,请问插入框架的视频,分辨率只能保持在默认的360p,点击其他分辨率就跳转到B站,有没有办法可以调整为更高的分辨率呢?谢谢!
请问下player.bilibili.com/player.html?aid=60016166&cid=104514776&page=1&danmaku=0里的aid和cid哪里来的呢,我的b站视频都是类似https://www.bilibili.com/video/BV1BT4y1L7Fs/的
网页源代码里就有
期待控制自动播放的参数,有时候挺烦人的
好的
这个地址没有多余的广告 但是没法iframe有办法解决吗? https://www.bilibili.com/blackboard/html5player.html?cid=150440924&aid=88037469&page=&as_wide=1
需要看你使用的完整iframe
你好,使用xbeibeix.com/api/bilibili/biliplayer/?url=形式的嵌入之后,视频会自动加载和自动播放,如何禁止自动加载和自动播放?另外,如何给视频制作封面图,谢谢
这个需要调整播放接口参数,后续打算添加一个是否自动播放的参数
您好!
想請問一下這是不是在移動應用內嵌的遊覽器是不能作用的呢?
我目前的測試如果是開啟外部遊覽器影片都能讀到
但是內嵌遊覽器都會顯示”視頻加載失敗”,是因為iframe不支援嗎?
移動應用內嵌的遊覽器是否支持HTML5
请问bilibili直链mp4嵌入网站可以吗
解析的MP4链接是有时效的
谢谢楼主分享,请问B站直播有没有办法嵌入网站
目前没有提供直播解析
你好,请问一下,用iframe嵌入时,
player.bilibili.com/player.html?aid=60016166&cid=104514776&page=1&danmaku=0
和
xbeibeix.com/api/bilibili/biliplayer/?url=av60016166?p=1
这两种地址显示有什么区别呢?就是直接用B站的地址或贝贝站的API地址是有什么不同?
另一个问题就是有能直接用播放的地址吗?
多谢了。
直接播放的地址可以使用 接口输入AID,CID获取,
官方的兼容性更好,有广告会跳转B站。移动端无高清。
提供的接口有的视频不能播放,没有多余链接。部分视频画质更高。兼容PC和移动端。缺点是不一定什么时候就不能用了。
为什么我在本地html里插入b站iframe外链以后请求不回复?有什么办法解决吗?求教
iframe src=”//player.bilibili.com/
本地需要改成,WEB服务器不要加HTTPS
iframe src=”https://player.bilibili.com/
这个貌似不起作用了,现在最高画质1的时候,显示的还是480的分辨率。
附带视频链接看一下
你好,在手机端(微信)浏览,会出现高度失调问题,就是长宽比例失调,可以实现自适应吗?
访问https://www.xbeibeix.com/api/bilibili.php
你好,在移动端,height参数设为500px的话,视频框架比例会变形
iframe嵌入BiliBili视频方法B站视频外链
感谢整理!帮大忙了