ASS.js - 一个在 HTML5 video 上渲染 ASS 字幕文件的库

[weizhenye]

GitHub

Demo

去年二月份花了一星期写了基本的解析和渲染, 之后就沉迷 Minecraft 坑掉了... 上个月重新捡起来填坑, 重构了一遍, 完成了大部分特效, fade, move 之类的.

ASS.js 尽可能地还原 Aegisub 中的显示效果, 但是浏览器的限制肯定无法 100% 还原特效, 比如多个旋转的效果就和 Aegisub 里有偏差, 不过应该在可接受的范围内. 之后可能会考虑写一个全用 Canvas 来渲染的版本, 自己实现 3D 变换.

因为使用了 CSS Animation 来实现高效率的动画效果, 所以浏览器要求 Chrome, Firefox, IE10 及以上.

现在依然在不断地更新和修 bug 中, 欢迎大家用各种 ASS 文件来测试来提 issue.

[phoenixlzx]

点赞
star 已送

顺便lz填完坑来本服玩吧233

[lincanbin]

取这种名字不会被屏蔽吗？

[est]

冲这名字点个star

[weizhenye]

@phoenixlzx 已经加入喵窝了, 主要是观光, 再自己开荒什么的懒得做了_(:з」∠)_

@lincanbin @est ASS♂We♂Can

[dangge]

只会写一点渣ass的蒟弱已送上star

[Stof]

看样子放上简单些的ASS才行，有些不想外放的ASS还得重新加进去再压一遍片

[gDD]

为了更好的 SEO，建议楼主把 README.md 第一行改为 Markdown 的 # ASS.js，然后紧接一行写 ASS.js parses ASS subtitle file format, then renders subtitles on HTML5 video. （把原句修复成了我认为正确且易读的语法）。

然后项目名是不是从 ASS 改为 ass.js 更好，放心重命名项目 GitHub 会自动做跳转的。

想起一个笑话，随便想一个名词 <noun>，然后都会有一个项目叫 <noun>.js。

[weizhenye]

@Stof 没有理解你的意思. 是指你的 ASS 文件不想外传? Demo 页是纯前端的, 搭在 GitHub Pages 上, 不会上传到什么服务器的.
@gDD 关于 README.md, 我英语表达确实不太好, 我会修改的; 命名的问题, 当时也没多想, 之后可能会建一个 canvas 分支, 文件名可能为 ass.canvas.js 或 ass-canvas.js, 作为各个分支的整体, 项目名为 ASS 还是合适的吧.

[Earthman]

支持绘图么？有些NB的字幕组用了矢量图来做特效

[caiya21]

我是来送star的

[davepkxxx]

ass。。。。

[weizhenye]

@Earthman 部分支持, 图形是可以画出来, 但是描边和阴影效果还暂时没做.

[goodbest]

@weizhenye
@Earthman

我这里正好测试了一下：
测试样例：harmonia pv
无字幕视频、ass、成品见链接: http://pan.baidu.com/s/1bnpUqg3 密码: yux5

1. ass draw的语法似乎还不行。（0-10秒）
2. \fad的话效果没有实现？没看到淡入淡出效果
3. style里定义的position，似乎在不同的分辨率下面，位置没法正确解析。（1分22秒左右）
4. 16：9的视频，在16：10的屏幕全屏的话，字幕位置不合适。

总之先star了，以后去github提issue

[weizhenye]

@goodbest
1. draw 是没问题的, 暂时还不知道具体原因, 我猜测是因为 4000 条 Dialogue 同时显示卡了, 你直接点进度条到 2~10 秒之间卡一万年后是可以看到效果的.
2. \fad 我测试是正常的, 你什么浏览器?
3. 通道获取算法里的 MarginV 忘乘 scale 了, 是 bug.
4. 这个晚点再测试.

[goodbest]

@weizhenye
不知道是不是你更新了代码还是什么，刚才试了一下，mac chrome v42

1的问题已经从不显示，变为了“非常卡”，但有效果显示。
2、3的问题问题已经修复
4的话，16：9的视频在16：10的屏幕上播放时，视频是垂直居中显示的（上下各有黑边 0.5*屏幕高度）。
但是这时候的字幕，依然在上方9/10的区域里显示，导致了位置错误。

[Stof]

@weizhenye 我的意思是指以后准备加上点什么ASS加密措施吗？

[weizhenye]

@goodbest 昨晚是更新了一下. 1 的问题暂时无解, 4000 条同一时间分别插入肯定卡爆, 但又要插入 DOM 后才能得到宽和高所以不能加到一起再插入. 4 的话, 由于似乎没法得到 video 的分辨率, 放大到与视频不同的分辨率时, 没法知道其确切的宽和高, 也暂时不知道怎么办.
@Stof 不会吧, 也没法加密吧, 要获取 ASS 信息肯定 init() 前就能获取到了.

[metalbug]

GOOD JOB MAN

[ayconanw]

赞啊，如果能顺便兼容 srt 就更好了