📢 本文由 gemini-3-flash-preview 翻譯
這篇文章由
Hiyoung
撰寫
其文章:
https://blog.hiyoung.icu/2022/08/11/607cac6fe835/
現在主流串流媒體網站都支援外連嵌入程式碼，但是 B 站 (什麼時候倒閉?) 現在 (2022/8/11) 內建的外連引用預設為 360P，且不能調節解析度，非常地討厭，與 Youtube 相比高下立判，下面重點介紹一下 B 站引用外連的參數和方法。
Bilibili 外連引用
原版引用連結：
1
| <pre class="language-html" data-info="HTML" data-role="codeBlock"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>iframe</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>//player.bilibili.com/player.html?aid=80433022&bvid=BV1GJ411x7h7&cid=137649199&page=1<span class="token punctuation">"</span></span> <span class="token attr-name">scrolling</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>no<span class="token punctuation">"</span></span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">frameborder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>no<span class="token punctuation">"</span></span> <span class="token attr-name">framespacing</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">allowfullscreen</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>iframe</span><span class="token punctuation">></span></span>
|
修改後引用連結：
1
| <pre class="language-html" data-info="HTML" data-role="codeBlock"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>iframe</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>//player.bilibili.com/player.html?aid=80433022&bvid=BV1GJ411x7h7&cid=137649199&page=1&as_wide=1&high_quality=1&danmaku=1<span class="token punctuation">"</span></span> <span class="token attr-name">scrolling</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>no<span class="token punctuation">"</span></span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">frameborder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>no<span class="token punctuation">"</span></span> <span class="token attr-name">framespacing</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">allowfullscreen</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>iframe</span><span class="token punctuation">></span></span>
|
嗶哩嗶哩外連 key 說明
| key | 說明 |
|---|
| aid | 之前 B 站使用的 AV 號 |
| bvid | 目前的 BV 號 |
| page | 第幾個影片, 起始下標為 1 (預設值也是 1) 就是 B 站影片選集裡的第幾個影片 |
| as_wide | 是否寬螢幕 【1: 寬螢幕, 0: 小螢幕】 |
| high_quality | 是否高畫質 【1: 高畫質 (最高 1080p) / 0: 最低影片畫質 (預設)】 |
| danmaku | 是否開啟彈幕 【1: 開啟 (預設), 0: 關閉】 |
| vd_source=XXX&t=XXX | 可加上精準空降位址 |
YouTube 外連引用
使用預設的 YouTube 外連即可，更進階功能可自行去
官方教學
學習。
1
| <pre class="language-html" data-info="HTML" data-role="codeBlock"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>iframe</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>560<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>315<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.youtube.com/embed/OgcCOwj7wNY<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>YouTube video player<span class="token punctuation">"</span></span> <span class="token attr-name">frameborder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">allow</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture<span class="token punctuation">"</span></span> <span class="token attr-name">allowfullscreen</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>iframe</span><span class="token punctuation">></span></span>
|
影片演示
請前往
https://blog.hiyoung.icu/2022/08/11/607cac6fe835/
觀看效果
Youtube
1
2
3
4
5
6
7
8
9
| <iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" loading="lazy" src="https://www.youtube.com/embed/ucbx9we6EHk" title="YouTube video player" width="560"></iframe>
### Bilibili (修改前)
<iframe allowfullscreen="true" border="0" frameborder="no" framespacing="0" scrolling="no" src="//player.bilibili.com/player.html?aid=499408391&bvid=BV16K411N7qj&cid=230404689&page=1&as_wide=1"> </iframe>
### Bilibili (修改後)
<iframe allowfullscreen="true" border="0" frameborder="no" framespacing="0" scrolling="no" src="//player.bilibili.com/player.html?aid=499408391&bvid=BV16K411N7qj&cid=230404689&page=1&high_quality=1&danmaku=1"> </iframe>
|
參考資料：
Sanarous 部落格
和
Google 外連 API 教學