参考如何在网页中嵌入B站视频 | Gahotx’s blog

前言

下面所提到的视频，均以【HonKai-StarRail】来，拍照啦！【三月七角色 PV】中的视频为例。

本文所提到的效果，以PC端（1920x1080）为准。

B站原生代码

在网页版Bilibili视频地下的分享栏，是有直接给出一个嵌入代码的

绿框里面的就是嵌入代码

也就是这行代码：

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

格式化了一下就是这样子的：

1
2
3
4
5
6
7
8
9
<iframe 
        src="//player.bilibili.com/player.html?aid=640863500&bvid=BV1VY4y1a78f&cid=580555204&page=1" 
        scrolling="no" 
        border="0" 
        frameborder="no" 
        framespacing="0" 
        allowfullscreen="true"
        > 
</iframe>

至于直接用嘛，效果一言难尽…

代码优化

所以有人就给这个代码做了优化：

1
<div style="position: relative; padding: 30% 45%;margin-top: 10px;margin-bottom: 10px"><iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" src="//player.bilibili.com/player.html?aid=640863500&bvid=BV1VY4y1a78f&cid=580555204&page=1&danmaku=0&high_quality=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe></div>

格式化之后是这样子的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div style="position: relative; 
            padding: 30% 45%;
            margin-top: 10px;
            margin-bottom: 10px"
     >
    <iframe style="position: absolute; 
                   width: 100%; 
                   height: 100%; 
                   left: 0; 
                   top: 0;"
            src="//player.bilibili.com/player.htmlaid=640863500&bvid=BV1VY4y1a78f&cid=580555204&page=1&danmaku=0&high_quality=1" 
            scrolling="no" 
            border="0" 
            frameborder="no" 
            framespacing="0" 
            allowfullscreen="true">
    </iframe>
</div>

相关参数如下：

key说明
aidAV号
bvidBV号
page第几个视频, 起始下标为 1
as_wide是否宽屏【1: 宽屏, 0: 小屏】
high_quality是否高清【1: 最高画质(720P), 0: 最低画质(默认)】
danmaku是否开启弹幕【1: 开启(默认), 0: 关闭】
t打开时, 自动跳转到某个时间

效果确实还可以。

但个人感觉还是差了点，还是不够简洁。

直链嵌入

在视频页，打开F12调试，控制台输入以下内容：

1
javascript:(()=>{const info = "made by ourongxing（即刻，B站，Github）";try{const link = `https://video-direct-link.vercel.app/bili.mp4?aid=${aid}&bvid=${bvid}&cid=${cid}`;const res = prompt("Command/Ctrl + C 复制，点击确定后直接跳转\n"+info,link);res&&window.open(link)}catch{window.alert("请在 B 站播放界面点击该书签\n"+info)}})()

下面控制台输入就行

弹出窗口中的网址就是永久有效的视频链接

如图所示

点击确定会跳转到一个短期有效的视频直链。

所以我们用 {% video %}嵌入视频就行。

1
{% video https://video-direct-link.vercel.app/bili.mp4?aid=640863500&bvid=BV1VY4y1a78f&cid=580555204 %}

这样子就很简洁了嘛。