jabbany
使用Canvas处理滚动弹幕。
搞错分支神马的2333 从新merge蛮麻烦。
这次对于排版直接使用了原来的排版系统，理论上应该和之前样式的没有啥区别。区别估计事在于用Canvas还原弹幕的话，边框略虚，这可能跟Canvas的抗锯齿有关（还TMD关不掉。。）。
效率对比如下：都是Surface Pro with IE，测试的是demo的test6。测试时间40s。
Canvas：
Dom：
感觉Surface终于不发热了～～2333
啊对。。还有，这个还原中宽度的计算是调用的canvas自带的函数，所以宽度应该没问题，不过高度没法计算，只能按照字号计算。这个有没有一个更好的换算公式。
以及，那种换行的弹幕是怎么回事？ 弹幕的内容中换行符是'\n'还是
？ Canvas 貌似不支持自动的识别\n换行，所以绘图的时候估计要手动处理一下了。
换行要智能的处理 \r 、\n和 、\r\n。Canvas不能识别任何排版，所以必须要手动处理，这也是一个缺点，因为有一部分代码做了一些固定化处理，不能依赖浏览器的排版了。。。
高度没有嘛？ 这不科学啊。话说字号px定义的是啥？ On Jul 30, 2014 9:45 PM, "Jim Chen" [email protected] wrote:
换行要智能的处理 \r 、\n和 、\r\n 。Canvas不能识别任何排版，所以必须要手动处理，这也是一个缺点，因为有一部分代码做了一些固定化处理，不能依赖浏览器的排版了。。。
— Reply to this email directly or view it on GitHub https://github.com/jabbany/CommentCoreLibrary/pull/34#issuecomment-50615862 .
px是字号。。。“理论上字号可以理解为高度”，实际上不完全是这样。参考 http://stackoverflow.com/questions/1134586/how-can-you-find-the-height-of-text-on-an-html-canvas
换行这个还是相对好处理的。你可以访问我的gh分支试试看对比一下区别。如果没有换行的话效果基本一致。 On Jul 30, 2014 9:45 PM, "Jim Chen" [email protected] wrote:
换行要智能的处理 \r 、\n和 、\r\n 。Canvas不能识别任何排版，所以必须要手动处理，这也是一个缺点，因为有一部分代码做了一些固定化处理，不能依赖浏览器的排版了。。。
— Reply to this email directly or view it on GitHub https://github.com/jabbany/CommentCoreLibrary/pull/34#issuecomment-50615862 .
是的，不过换行不难处理。回来我写一下。问题不大。 On Jul 30, 2014 10:31 PM, "Jim Chen" [email protected] wrote:
@Catofes https://github.com/Catofes 换行还是挺重要的，尤其是对于神弹幕视频，经常需要换行来排版。。。
— Reply to this email directly or view it on GitHub https://github.com/jabbany/CommentCoreLibrary/pull/34#issuecomment-50622303 .
如果只有\n \r\n 之类的换行基本不会有啥影响。等写出来可以看看效果。
主要是效率真心提高了好多，cpu占用减少50%以上，手机可以较流畅的观看这一点我觉得真心很重要。
/************** 字号高度的问题。这一点我是这样理解的：字号高度准确与否是影响到文字的排版。然后也就是说影响到我们应该画出多么大的一块空间来放置文字。所以说我们呢并不需要知道一个弹幕它纵向上实际是有多少个像素点，我们需要知道的是纵向上需要给他多少的位置。或者这样来举例，你在用word写字，在字号一定的情况下，无论这行字的内容是什么，每一行他所占的高度是一样的，不会因为一个特殊的文字突然两行之间的间距就增加的。所以说文字的高度我觉得是有一个上限的，而这个上限也一定和字号有关而和内容无关。 **************/
好吧呀。。。我承认我错了。。。字体的高度真是蛮复杂的。 http://support.microsoft.com/kb/74299 http://books.google.com/books?id=-O92IIF1Bj4C&lpg=PA898&ots=Sw2NE4bek9&dq=font%20internal%20leading&pg=PA897#v=onepage&q&f=false http://support.microsoft.com/kb/927078 http://flylib.com/books/en/3.217.1.179/1/
总之 Cell Height = Internal Height + fontSize(px);
然后呢 internal height 和字体有关。。。 从 http://support.microsoft.com/kb/927078 这里看 Most East Asian fonts in earlier versions of Word have an InternalLeading value of zero. The Meiryo, JhengHei, and YaHei fonts are East Asian ClearType fonts. However, these fonts have an InternalLeading value that is not zero.
总之无解。。。。 翻了翻Canvas中测量文字高度和换行的方法，都是手动定义 internal height. 我觉得这样也算凑合，大概会有个几个像素的偏差吧。
总之我先做出来试试看效果。
http://catofes.github.io/videojsABdm/demo/jixian.html
总之写完了。粗看没啥问题。而且我的电脑居然能播放了！！！ 太可怕。。。（话说这个弹幕同屏最高到1800+条真的没问题？）
目前关于高度的设置是这样的
认为 Internal leading = 3px 。对应25px字号的弹幕行距为28px 最常用的这个和我的Chromium对齐，其他的再试试看再说吧。
2333 这不科学诶
看一下你的canvas硬件加速开了没有？没有的话的确会卡。
chrome打开 chrome：//gpu查看
Firefox 貌似是这里 http://blog.mozilla.org/joe/2010/11/10/how-to-tell-if-youre-using-hardware-acceleration/
On Aug 3, 2014 11:19 AM, "aptx4869" [email protected] wrote:
在linux系统下i7 2600k 的机子卡崩了…… [image: deepinscrot-1507] https://cloud.githubusercontent.com/assets/1173599/3789726/ed301d1c-1abc-11e4-9404-0e3d9e05b12a.png
— Reply to this email directly or view it on GitHub https://github.com/jabbany/CommentCoreLibrary/pull/34#issuecomment-50980956 .
这个视频同屏弹幕破1800，不卡就见鬼了。。。
我的 i7 2730QM + AMD 6550M 差不多是这个效果。弹幕一多还是一顿一顿的。不过还是能看。
你可以对比一下原CCL demo里面加载那个坑爹的弹幕。印象中我这边直接卡的其他地方就不渲染了～～
这种高密度弹幕，感觉瓶颈不在CPU，不在GPU，在内存……
只开这一个页面浏览器内存峰值实际占用就2G多了，潜在占用3.4G，因为不断突破浏览器给页面预分配的内存，然后就得用上swap，而峰值时元素插入删除频繁，又可能触发频繁的GC，结果就出现打磨硬盘的情况……
这我还真没注意。我去看看内存。 On Aug 3, 2014 2:26 PM, "aptx4869" [email protected] wrote:
这种高密度弹幕，感觉瓶颈不在CPU，不在GPU，在内存……
只开这一个页面浏览器内存峰值实际占用就2G多了，潜在占用3.4G，因为不断突破浏览器给页面预分配的内存，然后就得用上swap，而峰值时元素插入删除频繁，又可能触发频繁的GC，结果就出现打磨硬盘的情况…… [image: deepinscrot-0332] https://cloud.githubusercontent.com/assets/1173599/3789957/c8852dee-1ad6-11e4-9f40-9974c3aa8da6.png
— Reply to this email directly or view it on GitHub https://github.com/jabbany/CommentCoreLibrary/pull/34#issuecomment-50983175 .
我这边内存正常？
还有上图你的潜在占用是340M。。没有理解为什么会有这么高的内存占用。尽管用了buffer，不过buffer也就是同屏最多数量的弹幕个数，少于1800个ctx，不应该有上G的内存占用啊。。
@aptx4869
我重现了你的情况。
大概是这个样子的内存使用率。原因还是因为chrome的canvas的硬件加速是关闭的。chrome://gpu 显示大概如下：
然后你可以试着把硬件加速打开来看看。打开方式是在 chrome://flags 里面勾选 覆盖软件渲染列表
如下图第一个：
然后 chrome://gpu 应该显示：
即打开了canvas的硬件加速。这时候再试试看结果。
-23333333 我服务器没有挂啊。。。。好吧啊 等一下吧视频直接挪到github page里面-
我擦咧。 为何我的服务器的NGINX会跪掉了呢。。。。现在应该好了。。
2014-08-07 10:35 GMT+08:00 aptx4869 [email protected]:
好像是这么回事，不过测试页面里的视频502挂掉了，没法验证……
— Reply to this email directly or view it on GitHub https://github.com/jabbany/CommentCoreLibrary/pull/34#issuecomment-51423986 .
乔颢 Catofes
浅草、洛水、冉枝。
GPG 公钥：http://pgp.mit.edu:11371/pks/lookup?op=get&search=0xAF1EF10EDE6EA2EC
开了硬件加速试了一下，第一次播放是没这问题了，内存占用少了不少。
但是拖到开头播放第二遍就出问题了，貌似内存泄漏了，没有释放显示存，然后拖放第三遍，显存爆掉浏览器强制关闭硬件加速换用内存，然后整台机子卡住不能动，打磨了硬盘一分多钟，然后页面挂掉了2223
233 我没有发现 等我去重现下试试看。 On Aug 8, 2014 9:00 AM, "aptx4869" [email protected] wrote:
开了硬件加速试了一下，第一次播放是没这问题了，内存占用少了不少。
但是拖到开头播放第二遍就出问题了，貌似内存泄漏了，没有释放显示存，然后拖放第三遍，显存爆掉浏览器强制关闭硬件加速换用内存，然后整台机子卡住不能动，打磨了硬盘一分多钟，然后页面挂掉了2223 [image: deepinscrot-4248] https://cloud.githubusercontent.com/assets/1173599/3851508/be1943ae-1e96-11e4-9d78-4b5b9453849c.png
— Reply to this email directly or view it on GitHub https://github.com/jabbany/CommentCoreLibrary/pull/34#issuecomment-51552204 .
我试了试没有重现成功。。。 重放了两次都没有发现有啥问题。不过第三次因为网络原因卡了2333
我想我在写代码的时候有关绘图的部分有一个主canvas 和 一些 buffer . 其中buffer的数目应该小于最大同屏弹幕的数量。对于那个jixian的demo也就是1200条左右。在执行seek的时候这些东西都应该被标记为可以重新利用。所以我没想清楚哪里有泄漏的地方。
你能不能在快崩溃的时候暂停一下，输出一下 window.thevideojs.danmu.cmManager.bctx 的数目。看看数目正常否。谢谢了
@aptx4869
顺便又看了看Chromium调试工具的 Heap Snapshot 然后发现在关闭canvas硬件加速的时候，虽然页面占用了1G多的内存，但是CCL实际占用了7M左右的内存。不知道是我的调试姿势不对，还是这本来就是chromium自身的原因。
你的情况更像是硬件加速跪了切换到了软件加速。我的显存是256M，貌似没有出现类似的问题。你可以试试看win下如何～ 或者升级一下chrome？
不太理解问题出在哪里。
啊对。显存这玩意javascript控制得了嘛。。。