關於博客園內嵌入bilibili視頻


原文:https://www.cnblogs.com/wkfvawl/p/12268980.html

一、原理

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

二、獲取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就可以了!

三、移動端適配

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的幫助!

四、嵌入方法

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

 

五、參數說明

看到評論區有朋友講清晰度的問題,我這里再說一下幾個參數。

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,選擇其他清晰度會打開原視頻頁面。

六、示例

這里給出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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM