2026年4月25日

HTML嵌入B站视频教程

HTML B站视频教程

HTML嵌入B站视频教程

一、核心前提：B站嵌入通用规则

仅支持公开视频：私密、锁定、会员专享视频无法嵌入
官方嵌入地址格式（固定写法，必须记住）：
```
https://player.bilibili.com/player.html?bvid=你的BV号
```
嵌入标签：必须用 <iframe> 标签，这是网页嵌入视频/网页的标准标签
禁止跨域限制：本地直接打开HTML文件可能无法播放，建议放到服务器/本地服务运行（如VS Code Live Server插件）

二、BV号：嵌入视频的唯一标识（必学）

1. BV号规则

B站视频唯一身份ID，以 BV 开头，后面是一串字母数字（例：BV1Sx4y1Z7f8）
获取方式：打开B站视频，地址栏中 bvid= 后面的字符串就是BV号
嵌入时必须填写正确BV号，否则视频无法加载

2. 基础嵌入示范（仅填BV号，默认配置）

<!DOCTYPE html>
<html>
<body>
    <!-- 基础B站视频嵌入：只填BV号 -->
    <iframe
        src="https://player.bilibili.com/player.html?bvid=BV1nnrvYrETr"
        width="800"
        height="450"
        frameborder="0"
        allowfullscreen>
    </iframe>
</body>
</html>

✅ 效果：加载对应BV号的视频，默认不自动播放、默认播放第1P、默认尺寸800x450

三、自动播放：打开页面自动播放视频

1. 自动播放规则（浏览器强制限制）

必须静音才能自动播放：所有浏览器禁止有声视频自动播放，这是硬性规则，无法绕过
参数写法：在链接后加 &autoplay=1&muted=1
- autoplay=1：开启自动播放
- muted=1：开启静音（必须加，否则自动播放失效）
移动端/部分浏览器可能不生效，属于浏览器限制

2. 自动播放示范代码

<!DOCTYPE html>
<html>
<body>
    <!-- 静音自动播放：autoplay=1 + muted=1 -->
    <iframe
        src="https://player.bilibili.com/player.html?bvid=BV1Sx411T7QQ&autoplay=1&muted=1"
        width="800"
        height="450"
        frameborder="0"
        allowfullscreen>
    </iframe>
</body>
</html>

✅ 效果：页面打开后，视频静音自动播放（为了省流，这里的演示就不自动播放了）

四、分P播放：指定播放多P视频的某一集

1. 分P规则

仅对多P合集视频生效（单P视频加参数无效）
参数写法：&p=数字
- p=1 = 播放第1P（默认）
- p=2 = 播放第2P
- p=3 = 播放第3P，以此类推
数字不能超过视频总P数，否则加载失败

2. 分P示范代码（播放第2P）

<!DOCTYPE html>
<html>
<body>
    <!-- 指定播放第2P：p=2 -->
    <iframe
        src="https://player.bilibili.com/player.html?bvid=BV1Js411o76u&p=2"
        width="800"
        height="450"
        frameborder="0"
        allowfullscreen>
    </iframe>
</body>
</html>

✅ 效果：直接加载并播放该视频的第2集

五、元素大小：自定义视频宽度/高度/全屏

1. 尺寸规则

单位：支持 px(像素)、%（百分比）
最佳比例：B站视频默认16:9，推荐尺寸：
- 固定尺寸：width="800" height="450"、width="640" height="360"
- 自适应尺寸：width="100%" height="auto"（适配手机/电脑）
全屏功能：加 allowfullscreen 属性（不加则无法全屏）
边框：frameborder="0" 去掉默认边框（更美观）

2. 三种常用尺寸示范

① 固定像素尺寸（适合电脑端）

<iframe
    src="https://player.bilibili.com/player.html?bvid=BV16zZPBsEka"
    width="960"  <!-- 宽度960像素 -->
    height="540" <!-- 高度540像素 -->
    frameborder="0"
    allowfullscreen>
</iframe>

② 自适应全屏宽度（适配手机/平板/电脑）

<iframe
    src="https://player.bilibili.com/player.html?bvid=BV1vnoSB3EYL"
    width="100%"   <!-- 宽度占满父容器 -->
    height="500"   <!-- 固定高度 -->
    frameborder="0"
    allowfullscreen>
</iframe>

③ 极小尺寸（适合侧边栏/小窗口）

<iframe
    src="https://player.bilibili.com/player.html?bvid=BV1j4411W7F7"
    width="320"
    height="180"
    frameborder="0"
    allowfullscreen>
</iframe>

六、终极整合代码：所有功能一起用

把BV号、自动播放、分P、自定义尺寸全部组合，直接复制修改BV号即可用：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>B站视频嵌入整合版</title>
</head>
<body>
    <h3>嵌入B站视频：自动播放+第3P+自适应尺寸</h3>
    <iframe
        src="https://player.bilibili.com/player.html?bvid=BV1uK41197aE&autoplay=1&muted=1&p=3"
        width="100%"
        height="500"
        frameborder="0"
        allowfullscreen>
    </iframe>
</body>
</html>

同样，这里我们不进行自动播放

总结

基础地址：https://player.bilibili.com/player.html?bvid=XXX
自动播放：必须加 &autoplay=1&muted=1（静音强制要求）
分P：&p=数字 指定集数
尺寸：width/height 设像素/百分比，allowfullscreen 开启全屏
标签：全程用 <iframe>，frameborder="0" 去除边框