Blodh

Blodh is abbreviation for Bilibili Loader of Danmaku HTML5

Blodh的目標是提供一種單文件引入的方案，方便在個人博客等頁面上引入B站視頻，并在HTML5播放器內播放。

建立開發環境

Clone整個項目后，在項目根目錄執行npm install。

如果你需要在你自己的環境中部署，你共需要修改三處。

1. src/Blodh.js 中的 backendUrl
2. src/bloader.js 中的 package_url 和 package_css （bloader并不是必要的）
3. backend/blodhapi.php 中的 APP_KEY, SERECT_KEY和APP_TYPE

源碼本身對此有說明。

修改結束后，在項目根目錄執行grunt，生成編譯好的文件。

共有三個文件生成，分別為：

blodh.min.js ---- 主文件
blodh.min.css ---- 樣式文件
bloader.min.js ---- 加載器

部署

你需要一個可執行PHP的環境來部署，將backend/blodhapi.php放置在合適位置。然后在src/Blodh.js中修改backendUrl的路徑（見上一節）。

在你的服務器上放置好生成的blodh.min.js和blodh.min.css文件。如果你需要用bloader，你同樣需要在src/bloader.js中修改它們的路徑。

請總是先預測部署好后文件路徑，修改完成后，運行grunt編譯，并部署編譯的結果。

在HTML中插入播放器

如果你在固定的頁面中使用，你需要在頁面中加入下面兩行：（這種方法無需bloader）

<link rel="stylesheet" href="blodh.min.css">
<script type="text/javascript" src="blodh.min.js"></script>

在你需要調用播放器的地方使用下面的HTML代碼，其中屬性bl-avid是視頻的av號，屬性bl-page是視頻的分P號。id可以任意設置。 DIV中的內容為載入前的占位符，載入成功后這部分內容會消失。

<div id="video1" bl-avid="3425967" bl-page="1">Bilibili視頻——載入中</div>
<script>blodh.init(document.getElementById("video1"))</script>

你可以在頁面上任何的地方調用任意次。

使用bloader插入播放器

bloader是提供給在論壇，博客，百科網站等可以插入片段HTML及javascript，但又不能修改整個頁面時的加載工具。

直接在你需要插入視頻的地方插入下面的代碼：

<div id="video1" bl-avid="3425967" bl-page="1">Bilibili視頻——載入中</div>
<script type="text/javascript">
!function(a){var b="https://127.0.0.1/blodh.min.js",c="https://127.0.0.1/blodh.min.css";if(window.blodh)window.blodh.init(a);else{var d=document.createElement("link");d.rel="stylesheet",d.href=c;var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src=b,e.charset="UTF-8",(document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0]).appendChild(e),(document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0]).appendChild(d),e.addEventListener("load",function(){window.blodh.init(a)})}}(document.getElementById("video1"));
</script>

其中script中的內容就是bloader.min.js的內容。注意這段腳本的最后有getElementById("video1")，這需要跟隨上面div的id來修改。

License

Blodh licensed by Apache License 2.0

Open Source Libraries used by Blodh:

ABPlayerHTML5 (Github: https://github.com/jabbany/ABPlayerHTML5), MIT License

CommentCoreLibrary (Gihub: https://github.com/jabbany/CommentCoreLibrary), MIT License

項目地址： https://github.com/zyzsdy/Blodh