用DPlayer实现的B站HTML5播放器

黑脸小白

在国外视频网站都早已采用html5播放器的时候，绝大部分国内视频网站还在用flash，比如B站。Flash这货已经快被淘汰了，刚好DIYgod开发了一款H5弹幕播放器DPlayer，可以拿来对接B站。原理很简单，服务端获取B站弹幕数据，转换为适用于DPlayer的格式用于播放。

1.获取B站视频源
GitHub上找到一个B站第三方API，可以获取视频源等信息：
GET  http://bilibili-service.daoapp.io/view/3580782 （其中3580782 为AV号），接口返回：

1. {
   
2.     "allow_bp": 1,
   
3.     "allow_download": 1,
   
4.     "allow_feed": 0,
   
5.     "author": "哔哩哔哩番剧",
   
6.     "bangumi": {
   
7.         "allow_download": "1",
   
8.         "bangumi_id": "1033",
   
9.         "season_id": "3271",
   
10.         "title": "极速老师"
    
11.     },
    
12.     "coins": "5584",
    
13.     "created": 1452804600,
    
14.     "created_at": "2016-01-15 04:50",
    
15.     "credit": "0",
    
16.     "description": "#02 枫的时间 ",
    
17.     "face": "http://i0.hdslb.com/user/9281/928123/myface.png",
    
18.     "favorites": "4621",
    
19.     "instant_server": "chat.bilibili.com",
    
20.     "list": {
    
21.         "0": {
    
22.             "cid": 5710510,
    
23.             "has_alias": false,
    
24.             "page": 1,
    
25.             "part": "",
    
26.             "type": "vupload",
    
27.             "vid": "vupload_5710510"
    
28.         }
    
29.     },
    
30.     "mid": "928123",
    
31.     "pages": 1,
    
32.     "pic": "http://i0.hdslb.com/video/9a/9a886536a807d717fe9bfe9bd811ed5b.jpg",
    
33.     "play": "979055",
    
34.     "review": "4630",
    
35.     "spid": null,
    
36.     "src": "c",
    
37.     "tag": "TV动画,洲崎绫,田中美海,冈本信彦,伊藤静,BILIBILI正版,黄老师,福山润,极速老师 第二季",
    
38.     "tid": 33,
    
39.     "title": "【1月】极速老师 第二季 02【独家正版】",
    
40.     "typename": "连载动画",
    
41.     "video_review": "46974"
    
42. }

复制代码

list即为该视频的分P，我们需要的是分P的CID，比如上面这个只分了1P，CID为5710510。
再GET第二个接口 http://bilibili-service.daoapp.io/video/3580782?quality=2
参数：

1. <font face="微软雅黑">quailty             [int]  清晰度(1~2，根据视频有不同)
   
2. type                [int]  0:flv,1:hdmp4,2:mp4</font>

复制代码

接口返回

1. <font face="微软雅黑">{
   
2.     "accept": "mp4,hdmp4",
   
3.     "backup": [
   
4.         "http://cc.acgvideo.com/201601191329/77fcfd7934552b0e2cf974e84d7d92ba/b/81/3580782-1.mp4",
   
5.         "http://ws.acgvideo.com/2/e8/3580782-1hd.mp4?wsTime=1453224424&wsSecret2=bdd28d4da66692521875ce8be36a2807&oi=2021932405&appkey=4ebafd7c4951b366&or=987503882"
   
6.     ],
   
7.     "url": "http://ws.acgvideo.com/2/e8/3580782-1.mp4?wsTime=1453224424&wsSecret2=cc4ff05eabce23fb761d568caf3c85db&oi=2021932405&appkey=4ebafd7c4951b366&or=987503882"
   
8. }</font>

复制代码

成功拿到视频源http://ws.acgvideo.com/2/e8/3580 ... 53224424&wsSecret2=
cc4ff05eabce23fb761d568caf3c85db&oi=2021932405&appkey=4ebafd7c4951b366&or=987503882

2.获取弹幕数据
B站弹幕数据接口：comment.bilibili.com/[CID].xml，我写了个简单的py脚本可以将其转换为DPlayer适用的格式。
接口为：https://mm.aoaoao.me/?id=[CID]
在DPlayer的Options中：

1. <font face="微软雅黑">var option = {
   
2.     element: document.getElementById('player1'),                       // Optional, player element
   
3.     autoplay: false,                                                   // Optional, autoplay video, not supported by mobile browsers
   
4.     theme: '#FADFA3',                                                  // Optional, theme color, default: #b7daff
   
5.     loop: true,                                                        // Optional, loop play music, default: true
   
6.     video: {                                                           // Required, video info
   
7.         url: '此处填写刚刚获取到的视频源URL',                                         // Required, video url
   
8.         pic: '封面图'                                          // Optional, music picture
   
9.     },
   
10.     danmaku: {                                                         // Optional, showing danmaku
    
11.         id: '此处填写视频CID',                                        // Required, danmaku id, MUST BE UNIQUE, CAN NOT USE THESE IN YOUR NEW PLAYER: `https://dplayer.daoapp.io/list`
    
12.         api: '此处填写转换服务端URL',                             // Required, danmaku api
    
13.         token: 'tokendemo',                                            // Optional, danmaku token for api
    
14.         maximum: 1000                                                  // Optional, maximum quantity of danmaku
    
15.     }
    
16. }</font>

复制代码

配置好后DPlayer可正常播放显示弹幕：

弹幕数据转换Python脚本：

1. <font face="微软雅黑">import requests
   
2. import sys
   
3. from flask import Flask,make_response
   
4. from flask import request
   
5. from xml.etree import ElementTree
   
6. reload(sys)
   
7. sys.setdefaultencoding('utf-8')
   
8. app = Flask(__name__)
   
9. node_info = list()
   
10. def get_node(node):  
    
11.     if node.attrib.has_key("p") > 0 :  
    
12.         node_list = [node.text,node.attrib['p']]
    
13.         danmuinfo = node.attrib['p'].split(",")
    
14.         node_info.append(node_list)
    
15.         danmu_type = danmuinfo[1].replace("1","right")
    
16.         danmu_type = danmu_type.replace("4","bottom")
    
17.         danmu_type = danmu_type.replace("5","top")
    
18.         danmu_text = str(node.text).replace('"',"")
    
19.         danmu_text = danmu_text.replace("'","")
    
20.         danmu_text = danmu_text.replace("\","/")
    
21.         return '{"_id":"'+danmuinfo[7]+'","author":"'+danmuinfo[6]+'","time":"'+danmuinfo[0]+'","text":"'+danmu_text+'","color":"#'+str(hex(int(danmuinfo[3])))[2:]+'","type":"'+danmu_type+'","player": ["bilibili469620"]},'
    
22. @app.route('/', methods=['POST', 'GET'])
    
23. def get_data():
    
24.     r = requests.get('http://comment.bilibili.com/'+request.args.get('id',0)+'.xml')
    
25.     root = ElementTree.fromstring(r.text)
    
26.     lst_node = root.getiterator("d")
    
27.     i = 1
    
28.     data = ""
    
29.     for node in lst_node:
    
30.         data = data + get_node(node)
    
31.         i = i + 1
    
32.     finall_data='{"code": 1,"danmaku": ['+data[:-1]+']}'
    
33.     response = make_response(finall_data,200)
    
34.     response.headers['Access-Control-Allow-Origin'] = '*'
    
35.     return response
    
36. if __name__ == '__main__':
    
37.     app.run(host='0.0.0.0'，threaded=True)</font>

复制代码

此篇文章来自树洞

颔首

B站已经自带H5了吧-

黑脸小白

颔首 发表于 2017-8-10 17:48
B站已经自带H5了吧-

是的。

还有。。我帖子下面那个车是谁开的。。驾照有了吗。。

颔首

黑脸小白 发表于 2017-8-10 17:49
是的。

还有。。我帖子下面那个车是谁开的。。驾照有了吗。。

{:4_96:}肇事司机已经现身了 快去围观