jabbany

2014 年 7 月 23 日

感谢aptx4869最近提交的几个更新,CommentCoreLibrary逐渐变成一个比较像样的JS项目了。于是最近终于加到 npm 和 bower 目录里面了,方便各位前端开发者直接通过npm(女仆妹 啊不node package manager)引入项目。

顺,CCL正式成为了AcFun的HTML5播放器前端的弹幕控制器。(虽然是一个稍旧一点的版本)~

哦,对,还有就是支持GPU加速了(如果你的浏览器也支持的话)

CommentCoreLibrary 和 SVG优化计划

之前那个3D球一直卡在<20fps下(目测在200px,40三角x9环的默认配置下仅有10fps不到),还有经常因为帧率不匹配会“闪”。后来发现是Host端的问题,采用了低效率的draw函数,而没有用批量绘制的 drawPath实现,所以修正了一下 基于 SVG 的 drawTriangles,现在已经可以在即使是 200px, 80三角x20环的情况下流畅的播放到近乎20fps。

第二个解决的问题是 clear() 诱发的闪烁问题。这个是因为绘图是非同步的,所以经常会产生出赛跑状况(Race Condition)。比如下面的例子:

沙箱 Sandbox        |   外部  Host
drawTrianges        |   DOM Draw Start
clear()             |   DOM Draw End / Clear Begin
drawTriangles       |   Clear End / Draw Start
clear()             |   Clear Begin

可见 clear() 在 drawTriangles 没完毕前就发过去就会导致有一帧啥都不画,却clear两次,而产生闪烁空白。所以,去而代之的是我们采取了在Host端动态删除的策略。每次发送 clear() 并不真的立即清除,而是把需要清除的东西加到一个队列里面,下次执行别的绘图动作后,再把队列里面的东西清除掉。这样先绘图再删除的策略就可以避免任何闪烁了。不过也带来了一个缺点,就是如果不连续绘图,那么采取 clear() 则会导致绘图并不真的被clear()掉了。所以在加入队列的同时还会启动一个短暂的定时器,如果定时器时间到了,也会强制删除,但是如果定时器时间到之前就进行了绘图操作,那么定时器就会被取消。这样以来render图像就可以相对非常的流畅了,在各个浏览器下。

还有一大改进就是对于  Tween库的修正,这样保证 parallel 平行任务的每一个任务在完成后都会真的“完成”(达到 currentTime == duration)。这样几乎就不会有动画残留问题了!

下一个挑战是 2D和3D的变幻,目前是用 matrix/matrix3d 进行操作后,通过transform返回给Host然后通过 CSS3 的 transform: matrix/matrix3d 来渲染。这样 scaleXYZ 和 rotXYZ 就都可以一气呵成了~。

jabbany

2014 年 7 月 10 日

Tween 库已经大部分被补完。虽然效率实在不敢直视,但是目前还原度还是可以直视的。同时scripting分支已经正式纳入主线,也是成为了还原B站代码弹幕最全的(喂其实是唯一一个吧)基于HTML5的实现。

http://jabbany.github.io/CommentCoreLibrary/demo/scripting/ccl.htm

欢迎广大Android/iOS/桌面系统的客户端积极借鉴KagerouEngine!也欢迎广大测试者积极提供比较好看的高级弹幕视频兼容建议。当然最期待的是广大弹幕职人帮我补全一下BSE的细节!^_^

未来的路途还远,细节还原还严重不足,性能也比较参差不齐,Firefox还容易卡死。

CommentCoreLibrary与代码弹幕支持更新

近期发现了一个相对完整很多的社区对于B站代码弹幕的API总结的文档:http://biliscript-syndicate.github.io/ 于是在参考了其中的许多内容,大量AS3文档后,彻底改变了CCL的代码弹幕实现(以确保未来更高的模块化支持)。现在的CCL代码弹幕部分,采取TypeScript编译而成,已经还原了很多很多的新接口,一改以前的自行探索接口。

测试一如既往的在:http://jabbany.github.io/CommentCoreLibrary/demo/scripting/

3D代码弹幕渲染支持

3D代码弹幕渲染支持。目前此渲染采用的是SVG,未来不久將支持canvas。【图中右侧的竖线渲染BUG是由于截图电脑的显卡驱动和Chrome在Linux下诱发各种BUG什么的导致的】

继续阅读

高级脚本弹幕@CommentCoreLibrary

终于放假了有时间继续研发CommentCoreLibrary了。之前就有所研究高级弹幕的可行性,安全问题和兼容问题,经过一些思考终于在新的实验性平台上实现了代码弹幕的基本还原!(卧槽!)

一、安全性/沙箱

随便让一些代码在浏览器里运行是非常危险且可怕的。而代码弹幕却需要带给用户一个相对较大的活动空间,却又需要保持代码的安全性。所以沙箱(Sandboxing)设计成为了重要的第一关。有关JS沙箱,有那么两三种当时在考虑范围内。一个是通过JS实现一个 JS解释器,这样用户代码就在虚拟的解释器里面运行,而外部则可以开放一些指定的API 供其调用。然而经过一番实验发现现有的很多JS下的JS解释器速度非常慢,或者占用内存不少(比如有的用LLVM编译的,然后再用Emscripten运行的。会时不时带着浏览器崩溃。。。 继续阅读

Coverflow+ABPlayerHTML5技术预览

今天终于把ABPlayerHTML5的多播放器BUG修完了,现在可以在一个页面上轻松的载入多个ABPlayerHTML5的播放器实例然后互不干扰的。

实在无聊突然想到HTML5的话反正播放器就是一个排版元素而已,所以是不是可以插到一些已有的插件里。然后就找了一个jQuery写的 Coverflow实现:https://github.com/vanderlee/coverflow 揪过来稍微跟ABPlayerHTML5混搭了一下。效果不错。

播放器

 

一如既往 ABPlayerHTML5位于 https://github.com/jabbany/ABPlayerHTML5

同时本DEMO 位于 http://jabbany.github.io/ABPlayerHTML5/build/demos/coverflow.html

ABPlayer4WP – 在 WordPress中插入HTML5的弹幕播放器

最近假期了,看在MukioPlayer都有支持WordPress的插件,所以萌生了把ABPlayerHTML5转到WP下的想法。。。于是初步测试了一下发现弹幕效果还是可以接受的,然后顺便就发现了几个吃CPU的操作,于是稍微修正了一下。

在Wordpress上的弹幕播放模块 继续阅读