首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
拉勾
V2EX  ›  分享创造

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

  •  
  •   weizhenye · 2015-05-04 09:31:45 +08:00 · 4389 次点击
    这是一个创建于 1324 天前的主题,其中的信息可能已经有所发展或是发生改变。

    GitHub

    Demo

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

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

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

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

    19 回复  |  直到 2016-11-01 00:45:45 +08:00
        1
    phoenixlzx   2015-05-04 10:35:55 +08:00
    点赞
    star 已送

    顺便lz填完坑来本服玩吧233
        2
    lincanbin   2015-05-04 10:57:51 +08:00 via Android
    取这种名字不会被屏蔽吗?
        3
    est   2015-05-04 11:01:51 +08:00
    冲这名字点个star
        4
    weizhenye   2015-05-04 11:32:34 +08:00
    @phoenixlzx 已经加入喵窝了, 主要是观光, 再自己开荒什么的懒得做了_(:з」∠)_

    @lincanbin @est ASS♂We♂Can
        5
    dangge   2015-05-04 12:06:37 +08:00 via Android
    只会写一点渣ass的蒟弱已送上star
        6
    Stof   2015-05-04 12:50:43 +08:00 via iPhone
    看样子放上简单些的ASS才行,有些不想外放的ASS还得重新加进去再压一遍片
        7
    gDD   2015-05-04 13:10:31 +08:00   ♥ 1
    为了更好的 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。
        8
    weizhenye   2015-05-04 15:22:02 +08:00
    @Stof 没有理解你的意思. 是指你的 ASS 文件不想外传? Demo 页是纯前端的, 搭在 GitHub Pages 上, 不会上传到什么服务器的.
    @gDD 关于 README.md, 我英语表达确实不太好, 我会修改的; 命名的问题, 当时也没多想, 之后可能会建一个 canvas 分支, 文件名可能为 ass.canvas.js 或 ass-canvas.js, 作为各个分支的整体, 项目名为 ASS 还是合适的吧.
        9
    Earthman   2015-05-04 15:40:37 +08:00 via Android
    支持绘图么?有些NB的字幕组用了矢量图来做特效
        10
    caiya21   2015-05-04 15:55:13 +08:00 via iPhone
    我是来送star的
        11
    davepkxxx   2015-05-04 16:00:02 +08:00
    ass。。。。
        12
    weizhenye   2015-05-04 16:05:29 +08:00
    @Earthman 部分支持, 图形是可以画出来, 但是描边和阴影效果还暂时没做.
        13
    goodbest   2015-05-04 16:20:41 +08:00   ♥ 1
    @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
        14
    weizhenye   2015-05-04 19:12:55 +08:00
    @goodbest
    1. draw 是没问题的, 暂时还不知道具体原因, 我猜测是因为 4000 条 Dialogue 同时显示卡了, 你直接点进度条到 2~10 秒之间卡一万年后是可以看到效果的.
    2. \fad 我测试是正常的, 你什么浏览器?
    3. 通道获取算法里的 MarginV 忘乘 scale 了, 是 bug.
    4. 这个晚点再测试.
        15
    goodbest   2015-05-05 07:31:50 +08:00
    @weizhenye
    不知道是不是你更新了代码还是什么,刚才试了一下,mac chrome v42

    1的问题已经从不显示,变为了“非常卡”,但有效果显示。
    2、3的问题问题已经修复
    4的话,16:9的视频在16:10的屏幕上播放时,视频是垂直居中显示的(上下各有黑边 0.5*屏幕高度)。
    但是这时候的字幕,依然在上方9/10的区域里显示,导致了位置错误。
        16
    Stof   2015-05-05 07:40:36 +08:00 via iPhone
    @weizhenye 我的意思是指以后准备加上点什么ASS加密措施吗?
        17
    weizhenye   2015-05-05 18:38:54 +08:00
    @goodbest 昨晚是更新了一下. 1 的问题暂时无解, 4000 条同一时间分别插入肯定卡爆, 但又要插入 DOM 后才能得到宽和高所以不能加到一起再插入. 4 的话, 由于似乎没法得到 video 的分辨率, 放大到与视频不同的分辨率时, 没法知道其确切的宽和高, 也暂时不知道怎么办.
    @Stof 不会吧, 也没法加密吧, 要获取 ASS 信息肯定 init() 前就能获取到了.
        18
    metalbug   2015-05-06 00:12:13 +08:00
    GOOD JOB MAN
        19
    ayconanw   2016-11-01 00:45:45 +08:00
    赞啊,如果能顺便兼容 srt 就更好了
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1073 人在线   最高记录 4019   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.1 · 19ms · UTC 17:53 · PVG 01:53 · LAX 09:53 · JFK 12:53
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1