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

开源一个自定义范围很大的网页弹幕播放器: DanPlayer, logo 就是一颗煎蛋

  •  2
     
  •   gzlock · 130 天前 · 2732 次点击
    这是一个创建于 130 天前的主题,其中的信息可能已经有所发展或是发生改变。

    一切的开端

    image.png

    我用 DPlayer 的时候有用户说弹幕(从右到左移动)飘的太快了,翻了几次文档都没有看到对应的设置。发了 issue 一直都没有回应(有一些中文 issue 是有回应的,所以排除是用中文发 issue 的原因),因为想自己做一个支持大范围自定义设置的。

    了解到 B 站(默认)和 DPlayer 的弹幕都是用 css 的 animation 驱使弹幕从右往左飘的,才知道原来我的 issue 的要求还是挺难实现的,毕竟 animation 的时间都是写死在 css 的。

    因此我决定要用 Canvas 绘制弹幕,就可以用 js 控制弹幕的速度了(也埋下了一个坑,就是弹幕多了会卡顿)

    操起键盘就是干之前,发现 DPlayer 有 tg 群,进群了解了一下群众的情况。有人说用 TypeScript 做吧,我说那行吧,顺便把 ts 学了。

    所以这是我第一个 TypeScript 项目,新手上路,如果有翻车的情况希望各位大佬帮忙抢救一下。

    想不出什么好名字了,那就叫 DanPlayer 吧,logo 还挺好做

    logo

    DanPlayer 弹幕播放器诞生 GithubDemo

    截图

    功能主治:

    • 使用 Canvas 绘制弹幕

    • 支持的自定义设置:

      • 播放器的高亮颜色
      • 播放器右下角的扩展按钮
      • 弹幕右键菜单的功能按钮
      • 普通 /直播 视频模式
      • 开 /关 全屏功能
      • 开 /关 底部控制栏中间的发弹幕功能区域
      • 显示 /隐藏 全部弹幕
      • 弹幕的全局透明度
      • 弹幕的全局字体大小
      • 流动式弹幕的移动速度(从右到左移动的弹幕)
      • 固定式弹幕的隐藏时间(固定在视频顶部和底部的弹幕)
      • 限制弹幕的显示区域,效果接近 B 站的相关设置
    • 支持的视频格式:

      • 优先检测浏览器能否原生支持播放,例如 mp4 视频文件,mp3 音频文件
      • 当浏览器不支持 HLS 视频,则使用hls.js
      • 当浏览器不支持 MPD 视频,则使用dash.js

    Demo 的功能非常齐全,上面提到的大部分自定义设置都做了对应的功能,放出截图

    屏幕快照 2019-09-14 18.21.09.png 屏幕快照 2019-09-14 18.21.19.png

    Demo 的弹幕右键菜单也添加了自定义按钮,这里单独放一个截图

    复制按钮是默认自带的,举报那个按钮就是自定义的功能按钮

    屏幕快照 2019-09-14 18.28.07.png

    npm 上的 danplayer 包如果翻车了请发 issue

    10 回复  |  直到 2019-09-20 07:36:18 +08:00
    echisan
        1
    echisan   130 天前 via iPhone   ♥ 1
    滋瓷一个
    dioxide
        2
    dioxide   129 天前   ♥ 1
    赞一个.
    keventseng
        3
    keventseng   128 天前   ♥ 1
    不错的样子~~~~
    natforum
        4
    natforum   128 天前   ♥ 1
    膜拜大佬,没有轮子我就造一个!
    gzlock
        5
    gzlock   127 天前
    这几天一直在折腾发布到 npm 的包,但是一直都有问题导致用不了,有大佬能传教吗😢
    gzlock
        6
    gzlock   127 天前
    连夜奋战,npm 上的包终于在 js 和 ts 项目都属于可用状态了
    robinchina
        7
    robinchina   127 天前   ♥ 1
    膜拜大佬
    gzlock
        9
    gzlock   125 天前
    @zhw2590582 #8 你的播放器这么完善才 1 百多个星星,我佛了
    zhw2590582
        10
    zhw2590582   125 天前 via iPhone
    @gzlock 因为都是自己写着玩的,也没怎么推广
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2248 人在线   最高记录 5168   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 28ms · UTC 03:21 · PVG 11:21 · LAX 19:21 · JFK 22:21
    ♥ Do have faith in what you're doing.