📢 この記事は gemini-3-flash-preview によって翻訳されました
この記事は
Hiyoung
が書いたものだよ。
元の記事はこちら:
https://blog.hiyoung.icu/2022/08/11/607cac6fe835/
今の主流なストリーミングサイトはどれも外部埋め込みコードに対応しているけど、Bilibili（いつ潰れるの？）の今の仕様（2022/8/11時点）だと、デフォルトの埋め込みリンクは360P固定で、しかも画質調整ができないんだ。これが本当に使い勝手が悪くて、YouTubeと比べるとその差は歴然。というわけで、今回はBilibiliの埋め込みパラメータとその方法について詳しく紹介するね。
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>
|
Bilibili埋め込み用キーの説明
| キー | 説明 |
|---|
| aid | 以前B站（Bilibili）で使用されていたAV番号 |
| bvid | 現在のBV番号 |
| page | 何番目の動画か。開始インデックスは1（デフォルトも1）。動画リストの中の何番目の動画かを指定する。 |
| 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 チュートリアル