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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

For Existing Member Sign In

爱意满满的作品展示区。

This topic created in 4024 days ago, the information mentioned may be changed or developed.

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

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

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

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

ass.js

渲染

ass

19 replies • 2016-11-01 00:45:45 +08:00

phoenixlzx

May 4, 2015

点赞
star 已送

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

lincanbin

May 4, 2015 via Android

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

est

May 4, 2015

冲这名字点个star

weizhenye

May 4, 2015

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

@lincanbin @est ASS♂We♂Can

dangge

May 4, 2015 via Android

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

Stof

May 4, 2015 via iPhone

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

gDD

May 4, 2015

为了更好的 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

May 4, 2015

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

Earthman

May 4, 2015 via Android

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

caiya21

May 4, 2015 via iPhone

我是来送star的

davepkxxx

May 4, 2015

ass。。。。

weizhenye

May 4, 2015

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

goodbest

May 4, 2015

@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

May 4, 2015

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

goodbest

May 5, 2015

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

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

Stof

May 5, 2015 via iPhone

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

weizhenye

May 5, 2015

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

metalbug

May 6, 2015

GOOD JOB MAN

ayconanw

Nov 1, 2016

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