ABPlayerHTML5和CommentCoreLibrary

随着B站最近加紧推出了各移动终端的软件后,现在似乎从 Android到 iOS都已经齐全了,于是HTML5版的弹幕播放器就继续开始酝酿了。由于再次温习了一下ABPlayer的源码和一些实现,加上JS又学到了新的知识(呃),于是改了一下ABPlayerHTML5的弹幕核心。为了改的方便和测试方便,于是就把专门处理弹幕的部分拿了出去,结果懒得合并回去了,才出现了所谓的CommentCoreLibrary。

CommentCoreLibrary是ABPlayerHTML5的弹幕核心元件,也是任何有希望了解弹幕播放器原理或是自己实现弹幕播放器的开发者们可以参考的一个JavaScript库。各种功能,如空间拆分器、弹幕过滤器等都被分开存放,让主文件更加易懂。而且稍微改变了几处的实现、修复了几个有关3D弹幕,3D运动弹幕的BUG之类的。目前可以比较正确的解析大部分的神弹幕,当然文字拼图的弹幕由于WEB字体过大所以依然有些问题。

运行性能测试:http://tools.kanoha.org/experimental/CommentCore

相比之下ABPlayerHTML5的下一步是完善播放器的操控界面,如:播放进度条,弹幕列表,发送器等。

还有,ABPlayerHTML5 改进了获取Sina片源的机制(从猜地址法换到利用接口),主要感谢B站的Android客户端里面提供的Sina地址接口

现在获取Sina的HTML5对应视频VID可以通过:
http://video.sina.com.cn/interface/video_ids/video_ids.php?v=vid返回的JSON对象获取。获得的地址可用在:
http://v.iask.com/v_play_ipad.php?vid=ipad_vid来直接进行外链播放!

39 Comments

  1. mukioplayer 播放器 新视频上传 发生错误 旧视频可以上传,注册页面错误 网页 上传作品不显示图片ABPlayerHTML5 压根不好安装,难道有其他后台程序兼容这个弹幕软件~求站长帮忙~

    回复

  2. ABPlayerHTML5 这个软件支持WP安装么 为何我WP 注册列表都错误 mukioplayer 新视频VID上传视频出错了,我感觉跟播放器版本有关,或者就是得修改源码什么的 求助 有帮忙的Q451186187 !新人建站真的很压力,时间80% 都投入建站上面去了

    回复

    1. 额。。。mukioplayer不是我写的这个你得问原作者去。。。ABPlayerHTML5目前WP插件还不能投入实际使用呢,所以要耐心等待。

      回复

    1. 是的。。。想测试带Video整合后的可以参考 http://jabbany.github.io/ABPlayerHTML5/simple/
      和http://jabbany.github.io/ABPlayerHTML5/
      现在CCL里面不会专门继续开发带Video的测试了

      回复

      1. 能讲解下 那些JS是必须的吗?还有那个怎样独立用CSS绘制外置的 控制面板。貌似有些控制你重新定义了。.自动播放会导致弹幕不出现,必须先暂停在播放才行..
        目前我只拼凑成这个样子了..
        点我传送

        回复

        1. CommentCore.js是弹幕引擎。。。在CCL的Demo里面是分着载入的,不过 make 就可以自动产生出一个单文件。这个必须得有。

          libxml.js, Parsers.js是分别负责通过AJAX下载弹幕文件,并解码格式(默认支持bilibili格式,acfun的能凑活看。。),如果加载了Parsers.js就不用加载BilibiliFormat.js了。

          至于css的话base.css是必须的,剩下的根据情况。

          有关播放器绑定,CCL里面的库因为只是弹幕引擎而已,所以不会默认绑定Video元件,也就不会被Video的开始Event触发。一个靠谱的绑定模式可以参考 http://jabbany.github.io/ABPlayerHTML5/simple/ 里面的 player.js 的 bind 部分。

          回复

  3. 求教mukio.js原理…弹幕好像不是以div块的形式显示的,而且弹幕边缘稍显模糊,好神奇
    作者好像没有完成,所以代码加密混淆了未开源…
    例子:http://gae.mukio.org/ipad/video/71880831

    回复

    1. mukio.js是每条弹幕建立一个Canvas,输出文字,当弹幕播放重绘事件时清除屏幕并把小Canvas内容一个个复制到大的Canvas上。弹幕边缘模糊是一个CSS3效果,CCL通过改一个CSS配置也可以实现(但是个人觉得其实不是很好看啊→_→)。代码混淆可以通过一个解PACKER的程序解开。

      目前的CCL有一个Canvas模式,就是仿照的mukio.js实现的。Canvas目前的缺点(以及Mukio.js的局限)就是对高级弹幕支持严重不足,3D效果基本无法实现(除非自己做3d投射),基于文字高度进行定位也不够准确因为无法有效度量文字高度[HTML5的问题],再加上其实Canvas渲染文字比较坑爹。。。

      也许更可靠的途径是 WebGL来实现高级弹幕,但是WebGL目前的支持参差不齐,而且硬件开销也不小。

      回复

      1. 有关弹幕池那部分的代码有些不明白..
        弹幕池编号的意义是什么呢?
        在弹幕空间分割器那里是如何工作的呢…

        希望有时间的话能够指点一下.. ^ ^

        回复

        1. 严格意义上说其实没有划分弹幕池,只是不同弹幕类型而已。。。空间分割器是用来控制弹幕满屏的,这样一旦弹幕消失它的空间就被释放可以重新利用放新的弹幕。顶端、底部、滚动和逆向都是独立规划空间的,相当于有4层弹幕。这些弹幕池控制新的弹幕应该出现在什么位置,比如如果已经有一条滚动弹幕在第0行滚动(最顶),那么新的弹幕就会出现在下一行,当第0行的弹幕一半滚动过中线时,新的弹幕就可以重新利用第0行了=w=

          回复

  4. 高贵的技术大人,除了用QQ之外,还有什么通信方式?

    不然我根本找不到人啊,太急了我, 其他通信方法~~~~

    我配合。。。

    回复

    1. 可以发邮件,平时很少用即时通讯工具。一般来说,没法很快的回复的话,说明有更重要的任务比较忙。比较忙的话,就算是找到了,还是得先忙该忙的啊→_→。

      回复

  5. 大大您好!
    我在github上down下了完整代码
    但是解压index.htm打开后弹幕貌似没加载上..player-demo也只是跑视频不跑弹幕
    历史版本也是
    难道是环境有问题= =

    回复

    1. 你是直接打开的HTML文件么?直接打开HTML文件的话就没法发送弹幕请求,因为安全沙箱限制本地网页发送Ajax请求。。。

      这个必须放到一个开发服务器上,比如Apache等等

      回复

    2. PS 系统配置:
      Chrome 26.0.1410.43 m
      IE 10
      Win7 64bit
      http://jabbany.github.io/CommentCoreLibrary/ 这个链接没有问题,只是本地跑不起来…

      回复

  6. 好消息 一个月后h.264 acc解码登录firefox正式版
    坏消息是youku存在兼容问题
    另一个消息是youku好像也在着手htnl5化
    http://labs.youku.com/

    回复

  7. 我这里研究了一点,新浪视频貌似分段和转换ipad后都会分配单独的vid【和普通视频共用】,子视频不能用v_play,长视频上传后会有一个文件,但是分段之后源文件似乎就404了……
    画质确实很纠结……

    回复

  8. 反馈一下……ipad那个vid好处是视频没有被分割,但是画质会比正常版有明显下降
    假如视频本身没有被分段【六分钟】,http://v.iask.com/v_play_ipad.php?vid=源vid也能获取一个地址不过要处理后才能使用

    回复

    1. 嗯,后者获取的是原FLV貌似,确实能用,但是貌似分段有问题。使用那个HTML5的VID的话会出完整的MP4封包的视频。不过略微可惜的是,有的被二压了,画质什么的……

      回复

    1. 目前还没有制作保存规则的功能,虽然过滤器已经有基本实现了。过略规则的语法会在整个过滤器的代码敲定后放出说明。

      回复

      1. 当然知道= =|||
        这几天正在持续更新ABPlayerHTML5中,目前快仿真出原Flash界面了。但是发现Chrome在出现大DOM树的时候渲染比较糟糕(呃),必须把弹幕列表关上才能比较顺畅的跑弹幕)
        新的界面抓下 jabbany/ABPlayerHTML5/ 的 /interface就是了=w=

        回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注