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

Danmaku - 又一个弹幕引擎库

  •  
  •   weizhenye ·
    weizhenye · 2015-08-11 12:43:36 +08:00 · 4233 次点击
    这是一个创建于 3393 天前的主题,其中的信息可能已经有所发展或是发生改变。

    GitHub
    Demo

    Danmaku 是一个基于 JavaScript 的弹幕引擎库, 支持绑定 HTML5 video 或 audio, 然后在指定的容器内显示弹幕, 也可以直接只指定容器使用无时间轴的实时模式.

    弹幕本身模式支持从右到左, 从左到右, 顶部固定和底部固定, 不支持高级代码弹幕.

    Danmaku 提供了 DOM 和 Canvas 两种渲染引擎, Canvas 会比 DOM 效率稍微高一点, 但是内存占用也更高. 在我的测试中一般的弹幕文件两个渲染方式感受不到差别, 用这个文件做极限测试时 Canvas 会稍微比 DOM 流畅一点点, 但因为内存占用高导致视频本身的播放也出现卡顿. DOM 的话只会卡弹幕不会卡视频.

    Danmaku 本身兼容到 IE9, demo 页面用了 AudioContext 之类的比较新的 API, 请用最新的浏览器打开.

    5 条回复    2015-08-11 22:05:28 +08:00
    comver
        1
    comver  
       2015-08-11 14:59:38 +08:00
    got thx
    johnhsm2333
        2
    johnhsm2333  
       2015-08-11 17:58:31 +08:00
    看源码学习去
    fhefh
        3
    fhefh  
       2015-08-11 18:50:06 +08:00
    不错 mark
    bugmenott
        4
    bugmenott  
       2015-08-11 20:04:03 +08:00
    全屏模式后,不显示弹幕了……
    weizhenye
        5
    weizhenye  
    OP
       2015-08-11 22:05:28 +08:00
    @bugmenott 全屏模式是因为考虑到目前全屏 API 都没有稳定, 直接对视频全屏的话在 IE 下似乎没法再显示其他结点了. 在实际应用中基于 HTML5 的播放器一般都是另外写一个控制条, 不会用浏览器原生的控制条的. 于是 HTML5 的播放器全屏的一般做法都是去全屏 video 的父结点, 这个父结点一般都包含控制条的. 事实上我就是把全屏的控制交给用户, 使用时只要保证弹幕的 container 包含在需要全屏的节点里就好了.
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2853 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 12:27 · PVG 20:27 · LAX 04:27 · JFK 07:27
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.