获取Bilibili视频直链挂载到网站上

AI摘要

正在生成中……


获取

Bilibili网页上分享出来的链接是这样的

1
https://www.bilibili.com/video/BV1hb4y1V7ks?share_source=copy_web

我们看到分享链接后面的BV1hb4y1V7ks这个视频的 BV号是 1F5411W7Xs

而这条视频的直链是

1
https://player.bilibili.com/player.html?aid=622547993&bvid=BV1hb4y1V7ks&cid=1376512149&p=1&autoplay=0

或者

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

访问下面链接（官方接口有失效可能）

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

获得一串json，从而获得这条视频的参数aid 俗称AV号就是 622547993、参数cid就是 1376512149

最后就得到了上文的视频直链

挂载

网站添加CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
/* 视频挂载 */
.iframe_video {
    position: relative;
    width: 100%;
    max-width: 100%; /* 确保视频不超过容器宽度 */
    margin: 0 auto; /* 居中显示 */
    border: 1px solid #ccc; /* 添加边框 */
    border-radius: 8px; /* 圆角边框 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 添加阴影 */
    overflow: hidden; /* 隐藏溢出部分 */
    background-color: #f9f9f9; /* 背景颜色 */
}

/* 响应式高度 */
@media only screen and (max-width: 767px) {
    .iframe_video {
        height: 10em;
    }
}

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

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

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

/* 响应式嵌套结构 */
.iframe_cross {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 比例 */
}

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

挂载视频 合适的位置加入以下代码

1
<iframe class="iframe_video" src="//player.bilibili.com/player.html?aid=622547993&cid=1376512149&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

查看效果