言归正传,播放器的弹幕列表是一个XML格式文件,它的地址是: http://www.bilibili.tv/视频的cid.xml
关于cid的获取可以使用bilibili弹幕网API, wiki.bilibili.tv 我这里就不说了
在IE中输入这个文件,我们可以看到: <?xml version="1.0" encoding="UTF-8" ?>
<d p="0,1,25,16777215,1312863760,0,eff85771,42759017">前排占位置</d>
<d p="16.6,1,25,16777215,1312863769,0,0edc8d09,42759052">站位..</d>
<d p="0,1,25,16777215,1312863770,0,658291b6,42759064">诶 蘑菇汤出了~</d>
内容部分 <d p="0,1,25,16777215,1312863760,0,eff85771,42759017">前排占位置</d>
这行内容的意义呢 先说内容“前排站位置”就不解释了 p这个字段里面的内容: 0,1,25,16777215,1312863760,0,eff85771,42759017 中几个逗号分割的数据 第一个参数是弹幕出现的时间 以秒数为单位。 第二个参数是弹幕的模式1..3 滚动弹幕 4底端弹幕 5顶端弹幕 6.逆向弹幕 7精准定位 8高级弹幕 第三个参数是字号, 12非常小,16特小,18小,25中,36大,45很大,64特别大 第四个参数是字体的颜色 以HTML颜色的十位数为准 第五个参数是Unix格式的时间戳。基准时间为 1970-1-1 08:00:00 第六个参数是弹幕池 0普通池 1字幕池 2特殊池 【目前特殊池为高级弹幕专用】 第七个参数是发送者的ID,用于“屏蔽此弹幕的发送者”功能 第八个参数是弹幕在弹幕数据库中rowID 用于“历史弹幕”功能。
比如 <d p="166.1,1,25,16777215,1312864104,0,ce083fe2,42760591">安全帽....安全X也不见得就一定安全啊</d>
一句代表着: 在整个视频166.1秒的时候,上部出现普通滚动弹幕,字号为12,颜色为16777215(10进制,16进制为&HFFFFFF,即白色),弹幕的发布日期为1312864104(UNIX时间戳,为1970年1月1日8时到弹幕发布时间之间的秒数差),弹幕发出者的ID为ce083fe2,内容为:“安全帽。。。。。”
然后我们就可以开始用php把弹幕抓下来分析了
- <?php
- error_reporting(0);
- $cid = $_GET['c'];
- if (!is_numeric($cid))
- {
- die('not vaild cid');
- }
- header('Content-Type: text/javascript; charset=utf-8');
- $url = 'http://comment.bilibili.tv/'.$cid.'.xml';
- $header = array(
- "User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.152 Safari/537.36",
- "Cookie: sid=4d0833b9; pgv_pvi=3868490752; DedeUserID=269563; DedeUserID__ckMd5=49d806d3343627e2; SESSDATA=2f6fa663%2C1396281758%2Cf3077cb7; _cnt_dyn=0; _cnt_pm=0; _cnt_notify=5; __utma=107677085.885893332.1388156294.1394854794.1394860318.91; __utmz=107677085.1394800027.86.20.utmcsr=google|utmccn=(organic)|utmcmd=organic|utmctr=(not%20provided)",
- );
- $ch = curl_init();
- curl_setopt($ch, CURLOPT_URL, $url);
- curl_setopt($ch, CURLOPT_ENCODING, 'gzip');
- curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
- curl_setopt($ch, CURLOPT_HTTPHEADER, $header);
- $danmaku = curl_exec($ch);
- preg_match_all('/<d.*?p="(.*)">(.*)?<\/d>/', $danmaku, $raw);
- foreach ($raw[1] as $value)
- {
- $foo = explode(',', $value);
- $time[] = round($foo[0] * 1000) / 1000;
- unset($foo[0]);
- $param['s'][] = array_values($foo);
- }
- $param['d'] = $raw[2];
- function danmakusort($a, $b)
- {
- if ($a == $b) return 0;
- return ($a > $b) ? 1 : -1;
- }
- usort($time, 'danmakusort');
- foreach ($time as $key => $value)
- {
- $dmk['t'][] = $value;
- $dmk['s'][] = $param['s'][$key];
- $dmk['d'][] = $param['d'][$key];
- }
- if (isset($_GET['debug']))
- {
- foreach ($dmk['t'] as $key => $value)
- {
- $s = $dmk['s'][$key];
- $s = array_reverse($s);
- $s[] = $value;
- $s = array_reverse($s);
- $s = implode(',', $s);
- echo '<d p="'.$s.'">'.$dmk['d'][$key].'</d>'."\n";
- }
- }
- else
- {
- $res = json_encode($dmk);
- if ($res == null or $res == 'null')
- {
- unset($res);
- $res['error'] = 'could not fetch';
- $res = json_encode($res);
- }
- die('callback('.$res.')');
- }
思路如下 1.先用php抓bilibili的xml弹幕, 这里用curl实现, 记得替换成你自己的cookie 2.按时间排序每一条弹幕 3.用正则解析xml, 并且输出json格式的弹幕方便前端解析
然后为了方便使用, 我的前端就转变为json, json弹幕格式示范可以看这里 http://12dora.sinaapp.com/pre/n.php?c=1456367&callback=callback&_=1395639194178 t属性里面储存所有弹幕的时间 d就是文字 s就是各种属性, 颜色字体什么的
然后就是前端解析部分, 主要分两大部分, 这里把后端库贴出来,代码很简单, 我这里大概说个思路 后端js库: http://12dora.sinaapp.com/static/js/danmaku.js 前端js库(偷懒直接写主页) http://12dora.sinaapp.com/index.html
1. 后端init()函数, 负责把json弹幕格式解析为元素存入全局变量 2.绑定setInterval事件, 10毫秒抓一次video tag的播放时长, 然后读入弹幕数组的第一条, 如果时间差在20毫秒内则交由gennerate_danmaku()生成弹幕并且显示 3.移动指针到下一条(这里不用遍历, 因为服务器已经按时间排序了, 所以如果当前指针的弹幕时间还没到后面的肯定时间也没到) 说一下gennerate_danmaku()函数的功能: 1.读取当前弹幕画布哪一行是空的, 指派弹幕位置 2.读取设置并用css描述设置(例如字体颜色...), 并且生成一个css3动画绑定到本条弹幕上
然后说一下前端, 前端用了一个video标签读入视频, 然后用一个一模一样大小的div用position absolute重叠在上面, 作为弹幕显示的虚拟画布, 方便控制, 这个相信各位都能轻松做出来.
然后就是弹幕动画部分, 这里我采用了css3的动画属性, 有的人建议我用canvas这样子性能会高, 不过canvas的话功能十分有限, 例如你想把当前评论的文字复制下来的话, canvas是完全无法做到的, 所以我这里采用原始的div, 每一条弹幕指派一个div, 并且赋予一个独一无二的id方便css3动画绑定元素, 而css3动画的话, 需要特别注意的是如果用from left:0px to left:100px 这样的语法整个页面弹幕一多就会崩溃, 所以这里选择用css3的translate属性, 因为这个会有硬件加速.
- var classNameGen = function(charsLength,chars) {
- var length = charsLength;
- if (!chars)
- var chars = "abcdefghijkmnpqrstuvwxyzABCDEFGHJKMNPQRSTUVWXYZ1234567890";
- var randomChars = "";
- for(x=0; x<length; x++) {
- var i = Math.floor(Math.random() * chars.length);
- randomChars += chars.charAt(i);
- }
- return 'h' + randomChars;
- };
上面的就是生成唯一id的函数, 然后绑定一个onanimationend事件, 让动画播放完毕就直接回收div. **提示, css3的class名字不能以数字开头, 这个必须要注意, 不然那个class就会失效
然后贴一个单条弹幕的css例子
- .hPMBMafziBSEheRYi {
- text-shadow: 1px 1px 1px #000000;
- left: 1109px;
- top: 0px;
- color: #FFFFFF;
- -webkit-animation: hPMBMafziBSEheRYi linear 5s;
- -webkit-animation-iteration-count: 1;
- -webkit-transform-origin: 50% 0%;
- -webkit-backface-visibility: hidden;
- -webkit-perspective: 1000;
- }
- @-webkit-keyframes hPMBMafziBSEheRYi {
- from {
- -webkit-transform: translate3d(1px, 0, 0);
- }
- to {
- -webkit-transform: translate3d(-1194px, 0, 0);
- }
- }
text-shadow是为了加一个阴影以免弹幕与背景一体色, 然后另外的重点就是-webkit-transform, 这样子写会比left定位效率高得多, 还有动画规则的话, 这里用了线性5秒动画, 有需求可以自己改, 5秒算是比较接近官方速度的了
这个技术其实不只是可以令html5的设备可以播放弹幕, 而且只要网站允许的话, 其实每一个网站都可以为自己的视频加上一层弹幕, 增加访客看视频的互动性.
***还有补充一点, 上面没提到的, 就是因为我们需要为每一条弹幕的css style绑定一个动画, 这个是不能直接用style=""来解决的, 所以必须生成一个<style></style>去储存, 然后现在js没有原生函数可以去删除一个class, 所以我这里把每一条弹幕都生成了一个<style>标签, 动画完成之后直接回收对应的弹幕<div>还有<style>标签, 免去了正则匹配删除class的麻烦事
最后发一个demo http://12dora.sinaapp.com/ 希望以后css的动画功能更加强大, 可以把繁杂的flash抛弃还希望可以把弹幕这种文化普及, 因为这种弹幕形式的评论交流实在是太赞了!
http://cloudbbs.org/forum.php?mod=viewthread&tid=21977
|
相关推荐
bilibili弹幕库图文弹幕的实现
bilibili代码弹幕初阶入门教程 教你如何发神弹幕
弹幕技术革新下视频社交的互动新形式研究——以Bilibili弹幕视频网为例.pdf弹幕技术革新下视频社交的互动新形式研究——以Bilibili弹幕视频网为例.pdf弹幕技术革新下视频社交的互动新形式研究——以Bilibili弹幕视频...
高仿bilibili 弹幕播放器 直接上传网站就可使用源代码支持二开,弹幕库如果失效,请修改index.php文件里的弹幕地址:https://danmu.izhuolin.cn/3.0/ 上传源码,调用方法:您的域名/p2p/?url= 测试链接:...
基于Java的有关Bilibili弹幕截取的小程序,主要涉及简单的JavaFX和爬虫技术
2、修复弹幕后台管理登录系统后门 3、修复安装程序界面没有样式问题 4、后台登录支持输出账号与密码了,更改用户名与密码请修改 dmku 文件夹下的 config.inc.php 文件 5、修复在播放器中右键菜单点击后自动在新窗口...
高防bilibili弹幕播放器1.5.zip。
基于python实现的Bilibili弹幕检索系统
demo_使用bilibili框架制作弹幕效果
bilibili 弹幕视频播放器Linux 版 bilibili 因为 flash 版本停滞于 11 的原因, 许多视频无限小电视而无法观看.虽然用 F12 大法可以获取视频地址然后 vlc 播放, 但是木弹幕了啊! 没弹幕我还不如直接下高清的看了.无吐...
基于 SpringBoot 的仿 bilibili 弹幕网开发.zip
搭配B站直播姬使用,可在桌面上右下角直接看到实时弹幕,还可以点歌,提示新的关注发送弹幕,屏蔽抽奖通知
(正文)10-16弹幕视频网站营销方案的设计与实施——以Bilibili网站为例.zip
无后端的仿 YouTube Live Chat 风格的简易 Bilibili 弹幕姬.zip
市面上现有的源码不是漏消息就是掉线,自己用e2ee的websocket客户端重新写了一个。
最新哔哩bilibili视频弹幕播放器/带后台版本/完整无错 此款播放器源码添加及修复了很多功能,且所有源码均本地化,不存在外链的情况。 环境:PHP7.0+MySQL5.6 优化修复功能: 1、修复优化播放器播放结束自动下一集...
在线影视+视频播放带仿哔哩哔哩bilibili视频字幕弹幕网站源码.rar在线影视+视频播放带仿哔哩哔哩bilibili视频字幕弹幕网站源码.rar在线影视+视频播放带仿哔哩哔哩bilibili视频字幕弹幕网站源码.rar