專案地址:
https://github.com/Bilibili/DanmakuFlameMaster
DanmakuFlameMaster
android上開源彈幕解析繪製引擎專案。
ijkplayer,提供 Android和 iOS雙平臺視訊播放器的解決方案。
專案地址:https://github.com/Bilibili/ijkplayer
這兩個開源專案已被優酷土豆、ACFUN等知名app使用
Features
-
使用多種方式(View/SurfaceView/TextureView)實現高效繪製
-
B站xml彈幕格式解析
-
基礎彈幕精確還原繪製
-
支援mode7特殊彈幕
-
多核機型優化,高效的預快取機制
-
支援多種顯示效果選項實時切換
-
實時彈幕顯示支援
-
換行彈幕支援/運動彈幕支援
-
支援自定義字型
-
支援多種彈幕引數設定
-
支援多種方式的彈幕遮蔽
TODO:
-
繼續精確/穩定繪幀週期
-
增加OpenGL ES繪製方式
-
改進快取策略和效率
http://www.jq22.com/jquery-info2611
DanmuPlayer
這個已經有使用者布過了。Danmmu Player是一個具備彈幕功能的Html5視訊播放器。 具備彈幕視訊播放,接受使用者傳送彩色彈幕,實時調解彈幕顯示效果等功能。 Danmmu Player意在使開發者能便捷的在網站中實現彈幕視訊播放。
開始使用
1.第一步引入本播放器的js和css檔案,需要和jQuery一起引用。
<link rel="stylesheet" href="assets/DanmuPlayer/css/danmuplayer.css"> <script src="assets/js/jquery-1.11.1.min.js"></script> <script src="assets/DanmuPlayer/js/danmuplayer.js"></script>
2.新建一個div,這裡把id值設為danmp
<div id="danmup"></div>
3.初始化DanmuPlayer,利用剛才新建的div.
$("#danmup").danmuplayer({ src:"shsn.mp4", //視訊源 width:800, //視訊寬度 height:445 //視訊高度 });
好了,已經可以在頁面上看到播放器。試著發下彈幕,也OK。 等等,現在使用者發的彈幕貌似沒有寫入資料庫,也就是說是一次性的,重新整理頁面後就沒了?是這樣的,但是接下來就告訴你可以怎麼做。進階使用
4.在上一步中,我們用呼叫某jQuery物件的方法初始化了一個彈幕播放器,並傳遞了一些引數(src,width,height)。其實這個方法具有以下引數 (除了視訊源外其餘引數均可選,冒號後面的為預設值)
src: "shsn.mp4", //視訊源 height: 450, //播放器的高度 width: 800, //播放器的寬度,最小寬度支援為720 speed: 20000, //彈幕速度,穿過視訊的毫秒數 danmuss: {}, //預設的danmuss物件(稍後介紹) default_font_color: "#FFFFFF", //預設的彈幕顏色 font_size_small: 16, 小號彈幕的字型大小,注意此屬性值只能是整數 font_size_big:28, //大號彈幕的字型大小 opacity: "1", //預設彈幕的透明度 top_botton_danmu_time: 6000, //底部及頂部彈幕存留的世界 url_to_get_danmu: "", //用來接收彈幕資訊的url (稍後介紹) url_to_post_danmu: "" //用來儲存彈幕資訊的url (稍後介紹)
5.在這一節中,向米娜桑介紹DanmuPlayer中的兩種js物件,danmu物件及danmuss物件。 danmu物件意指具體某一條彈幕及起資訊,它有如下屬性:
text——彈幕文字內容。 color——彈幕顏色。 position——彈幕位置 “0”為滾動 “1” 為頂部 “2”為底部 size——彈幕文字大小。 “0”為小字 ”1”為大字 time——彈幕所出現的時間。 單位為”分秒“(及1/10秒,100毫秒) isnew——當出現該屬性時(屬性值科委任意),會認為這是使用者新發的彈幕,從而彈幕在顯示的時候會有邊框。
舉例:var a_danmu={ "text":"2333333" , "color":"green" ,"size":"1","position":"0","time":60};
要顯示邊框的新彈幕:var a_danmu={ "text":"2333333" , "color":"green" ,"size":"1","position":"0","time":60 ,"isnew":" "};
danmuss物件是該彈幕視訊中所有danmu物件的集合,它的存在是為了提高程式的效率。 每個DanmuPlayer只有一個duamss物件。DanmuPlayer在執行時會把每個danmu物件寫入danmuss物件。 dammuss物件每個屬性的名稱為彈幕所出現的時間點(分秒),屬性值為該時間點所出現的所有彈幕的danmu物件(除掉time屬性的)所組成的陣列。 例如:var danmuss={ 1:[ { "text":"hahahaha" , "color":"red" ,"size":"0","position":"0"}, { "text":"233333" , "color":"red" ,"size":"0","position":"2"} ], 3:[ { "text":"poi" , "color":"red" ,"size":"1","position":"1"}, { "text":"2333" , "color":"#FFFFFF" ,"size":"0","position":"0"} ], 50:[ { "text":"XXX真好" , "color":"#FFFFFF" ,"size":"0","position":"2"}, ] };
在初始化DanmuPlayer時有個可選的引數danmuss,它的值就應該是一個合法的danmuss物件。有了這個引數,DanmuPlayer會把這個引數值中的dannuss播放於螢幕。(對於danmuss物件,如果暫時不理解可以繞過,很少用到)6.在這一節中,告訴米娜桑如何和後端連線將彈幕儲存於資料庫。DanmuPlayer提供了高度封裝的和後端ajax互動的介面,你只需按照介面修改出一個或兩個後端頁面即可。 在初始化DanmuPlayer時,兩個引數url_to_get_danmu和url_to_post_danmu就是用來和後端連線的。url_to_get_danmu用來獲取彈幕,url_to_post_danmu用來儲存彈幕。url_to_get_danmu和url_to_post_danmu接受的引數都是url。 DanmuPlayer在頁面載入時,會向url_to_get_danmu所對應的頁面傳送Get請求,url_to_get_danmu對應頁面的http響應報文的內容中應該是一個由danmu物件組成的js陣列(字串形式)。"['{danmmu物件1}','{danmu物件2}',...,'{danmu物件n}']"這樣的字串(遵循JSON格式標準)(在報文中是沒有最外面的引號的)(注意:每個danmu物件都要被引號所包裹,否則會產生致命錯誤)。 當使用者發彈幕時,DanmuPlayer向url_to_post_danmu傳送post請求,報文的內容是使用者所發彈幕的danmu物件(字串)(遵循JSON格式標準)。 在demo&doc目錄中有一個簡單的php版的url_to_get_danmu和url_to_post_danmu所對應頁面的編寫示例:
7.DanmuPlayer中有一個id為danmu的標籤(這句話可以不用理,詳情請參照jQuery.danmu.js專案)。可以直接複製以下程式碼語句去即時的操作彈幕: 暫停彈幕:
$('#danmu').danmu('danmu_pause');
暫停後繼續:$('#danmu').danmu('danmu_resume');
停止彈幕:$('#danmu').danmu('danmu_stop');
即時增加彈幕:$('#danmu').danmu("add_danmu",新彈幕的danmu型別物件);
獲取彈幕執行的當前時間(單位為分秒):$('#danmu').data("nowtime");
設定彈幕執行的當前時間(單位為分秒):$('#danmu').data("nowtime",新時間)
更改彈幕透明度:$(#danmu).data("opacity",新透明度數值);
是否處於暫停狀態:$('#danmu').data("paused");
其他方法
8.由於DanmuPlayer基於video.js編寫,故幾乎所有的video.js介面都可用於DanmuPlayer。 video.js專案及文件地址:https://github.com/videojs/video.js/ DanmuPlayer在內部定義了一個名字叫做danmu_video的全域性videojs物件,可以對danmu_video使用video.js的任何方法及相應事件處理等。
9.注意:由於DanmuPlayer內部元件命名的規範性,它幾乎可以與其他任何前端外掛共存。但是,一個頁面上只允許存在一個DanmuPlayer。此缺陷在後續版本或許會改進。如果你需要在一個頁面中使用多個DanmuPlayer,可以使用frame標籤。
許可
你可以隨意使用本專案,只需要在您的專案中新增這麼一行註釋:
DanmuPlayer (//github.com/chiruom/danmuplayer/) - Licensed under the MIT license
相關專案資訊:
http://app.hezhibo.com:8080/Video/index.html
http://app.hezhibo.com:8080/Video/hlsplayer/share2.html
http://192.168.1.127:8080/ShareServer/danmuplayer/share.html
https://github.com/chiruom/DanmuPlayer
http://media.isafe365.cn:8080/play/000200065690101_32010020160523140319753100eum9xj.mp4.m3u8
http://media.isafe365.cn:8080/download/000200065690101_32010020160523140319753100eum9xj.mp4
http://112.4.28.209:8000/live/1000.m3u8
https://bce.baidu.com/product/lss.html
out.println("{\"img\":\"http://i1.hdslb.com/bfs/archive/7e1e76c24f94a53bea3feea09afabd8842ae719d.jpg\",\"cid\":\"http://comment.bilibili.com/7639962.xml\",\"src\":\"http://cn-zjwz5-dx.acgvideo.com/vg6/8/7b/7639962-1.mp4?expires=1464111900&ssig=tp_JaHvlYA4TD0B9LChaJw&oi=1968716518&internal=1&rate=0\"}");
{"img":"http://i1.hdslb.com/bfs/archive/7e1e76c24f94a53bea3feea09afabd8842ae719d.jpg","cid":"http://comment.bilibili.com/7639962.xml","src":"http://cn-zjwz5-dx.acgvideo.com/vg6/8/7b/7639962-1.mp4?expires=1464111900&ssig=tp_JaHvlYA4TD0B9LChaJw&oi=1968716518&internal=1&rate=0"}
http://www.bilibili.com/m/html5?aid=4709464&page=1
http://192.168.1.127:8080/m/html5?aid=4709464&page=1
http://192.168.1.127:8080/BPC/a.html
192.168.1.241:8760/BPC/sharePageUrl?sharePageUrl=aHR0cDovLzExMi40LjI4LjIwOTo4MC92b2QvbWVkaWEyMS8yMDE1MTAyOTE3MzIwMzgyMF8xODcyay5tcDQubTN1OD90aW1lc3RhbXA9MjAxNjA2MjIxNTQzMDkmZW5jcnlwdD1hZWZjMzVhMzFiZmQ2NmZmNWViYTY2NDAzMmQyYTg0MCZzdF9zb3VyY2VpZD1uaXA5cGRpYWR0dXQxdmRzYnltaGdzc3RocG92ZngxZg==
http://192.168.1.241:8760/BPC/sharePageUrlDm?sharePageUrl=aHR0cDovLzExMi40LjI4LjIwOTo4MC92b2QvbWVkaWEyMS8yMDE1MTAyOTE3MzIwMzgyMF8xODcyay5tcDQubTN1OD90aW1lc3RhbXA9MjAxNjA2MjIxNTQzMDkmZW5jcnlwdD1hZWZjMzVhMzFiZmQ2NmZmNWViYTY2NDAzMmQyYTg0MCZzdF9zb3VyY2VpZD1uaXA5cGRpYWR0dXQxdmRzYnltaGdzc3RocG92ZngxZg==