關於博客園內嵌入bilibili視頻

1、原理

使用iframe標籤，更改其中src對應bilibili視頻的aid和cid，組裝新的HTML源碼，便可在文章內嵌入bilibili視頻。

2、獲取aid和cid

aid爲視頻的av號，可是每一個av號下不必定只有1p，因此B站用cid來管理視頻的真正id，那麼也能夠說若是視頻只有1p，那麼cid就無用了，我測試直接填1也是能夠的。

這裏介紹兩種獲取aid和cid的方法：

方法一

先觀察視頻的URL

https://www.bilibili.com/video/av84267566?from=search&seid=13400362594908841480

 其中84267566就是av號。

或者直接點右鍵——查看網頁源代碼——ctrl+f——搜索'aid='、‘cid=’ 就能夠了。

方法二(推薦)

咱們在轉發視頻的時候直接能夠看到嵌入代碼

 

這是官方準備的嵌入代碼，能夠直接拿來用，可是顯示效果不是很理想，樣式不是咱們但願的，須要調整一下。

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

從嵌入代碼中咱們直接獲得了aid和cid

咱們從新設置一下功能、大小、樣式，獲得可用的HTML代碼

<iframe src="//player.bilibili.com/player.html?aid=84267566&amp;cid=145147963&amp;page=1" frameborder="no" scrolling="no" width="95%" height="600"></iframe></p>

之後插入須要的bilibili視頻只須要改變上面的aid和cid就能夠了！

3、移動端適配

ExperDot大佬提出移動端出現不適配的問題，我當時其實並無考慮移動端的問題，固定了播放器的高度形成了這個問題。

 

 大佬已經給出瞭解決方案

<div style="position: relative; padding: 30% 45%;">
<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" src="https://player.bilibili.com/player.html?cid=145147963&aid=84267566&page=1&as_wide=1&high_quality=1&danmaku=0" frameborder="no" scrolling="no"></iframe>
</div>

能夠用這個代碼做爲樣板，之後只須要改變src的id好就能夠了！

再次感謝大佬ExperDot的幫助！

4、嵌入方法

選擇tinyMCE編輯器，這是博客園默認的編輯器，選擇編輯html原代碼，插入上面的代碼便可。

 

5、參數說明

原本這篇博客是個人遊戲之做，但沒想到捧場的朋友這麼多，我看到評論區有朋友講清晰度的問題，我這裏再說一下幾個參數。

https://player.bilibili.com/player.html?cid=145147963&aid=84267566&page=1&as_wide=1&high_quality=1&danmaku=0

 

key	說明
aid	視頻ID 就是B站的 avxxxx 後面的數字
cid	應該是客戶端id, clientId 的縮寫(推測的, 不必定準確) 通過測試, 這個字段不填也不要緊
page	第幾個視頻, 起始下標爲 1 (默認值也是爲1) 就是B站視頻, 選集裏的, 第幾個視頻
as_wide	是否寬屏 1: 寬屏, 0: 小屏
high_quality	是否高清 1: 高清, 0: 最低視頻質量(默認) 如視頻有 360p 720p 1080p 三種, 默認或者 high_quality=0 是最低 360p high_quality=1 是最高1080p
danmaku	是否開啓彈幕 1: 開啓(默認), 0: 關閉

因此只要設置high_quality=1就能開啓最高畫質了。

B站官方並無給出文檔說明.....但我發現論壇上有一些相關的討論

相關連接

經測試high_quality參數能夠正常使用，此參數控制外鏈播放器的默認清晰度：
=1時默認清晰度是最高非大會員清晰度，例如：
（1）原視頻清晰度有360P、480P、720P，外鏈播放器默認爲最高的720P，
（2）原視頻清晰度有360P、480P、720P、1080P，外鏈播放器默認爲最高的1080P，
（3）原視頻清晰度有360P、480P、720P、1080P、1080P+，外鏈播放器默認爲1080P，
選擇其餘清晰度會打開原視頻頁面，

=其餘數值或沒有此參數時默認清晰度是360P，選擇其餘清晰度會打開原視頻頁面。

6、示例

這裏給出2020拜年祭的《萬古生香》

萬古千秋，代代有玲瓏氣象！
風雲史往，頁頁賦秀骨生香！

 

<div style="position: relative; padding: 30% 45%;">
<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" src="https://player.bilibili.com/player.html?cid=145147963&aid=84267566&page=1&as_wide=1&high_quality=1&danmaku=0" frameborder="no" scrolling="no"></iframe>
</div>