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

Artplayer.js - HTML5 视频播放器，求大佬测试一下

  •   
  •   zhw2590582 ·
    zhw2590582 · 2019-05-03 23:07:39 +08:00 · 4432 次点击
    这是一个创建于 2037 天前的主题，其中的信息可能已经有所发展或是发生改变。

    Github: https://github.com/zhw2590582/ArtPlayer

    Demo: https://artplayer.org

    一直想往前端流媒体方面研究，学习视频播放器 API 期间，断断续续的终于整体实现了一个简单的播放器，以及一些相关的插件、工具和组件。 之前在 v 站发过一次求测试，现在终于有一个相对稳定的版本，但兼容性问题还是有的，想大佬们继续帮忙测试一下。 其实写到一半才发现和其他播放器项目重名了，感觉悲催了。 详细功能的话好像也和其他播放器差不多，但在写的过程中发现和学习了一些好玩的东西，例如：

    1. Chrome 的画中画模式确实很方便
    2. 原来前端也可以把 srt 字幕转成 vtt 字幕直接使用
    3. 可以直接从视频生成 GIF，但很依赖网络情况: Demo
    4. 可以从视频帧中提取颜色样本，做出一张背光的效果: Demo
    5. 弹幕的优化主要在于怎么让弹幕尽量少的发生碰撞，要做到像 B 站那种效果确实还挺难的: Demo
    6. 前端也可以生成视频的预览图，对于简单的需求很方便，对于自动化场景还是要靠后端: Demo
    7. 对于没有弹幕库服务器的，可以使用 Github Issues Api 做弹幕库，但每小时最多五千请求，可以玩一下: Demo
  • Demo
  • 播放器
  • 弹幕库
  • GitHub
    23 条回复  •  2019-07-10 17:24:25 +08:00
    KasuganoSoras
        1
    KasuganoSoras  
       2019-05-04 00:46:44 +08:00
    优秀，已 star
    MyFaith
        2
    MyFaith  
       2019-05-04 10:03:34 +08:00
    不错，但是切换清晰度不能继续播放
    zhw2590582
        3
    zhw2590582  
    OP
       2019-05-04 10:16:04 +08:00 via iPhone
    @MyFaith 什么浏览器？我看看
    zeyexe
        4
    zeyexe  
       2019-05-04 10:20:07 +08:00
    看起来很不错。希望下一步能集成三大框架。
    zhw2590582
        5
    zhw2590582  
    OP
       2019-05-04 10:31:03 +08:00 via iPhone   ❤️ 1
    @zeyexe 哪三大框架？ Vue 和 React 已经有了。
    aliangddd
        6
    aliangddd  
       2019-05-04 10:39:55 +08:00 via iPhone
    学习一下
    codespots
        7
    codespots  
       2019-05-04 10:45:51 +08:00
    我也对前端流媒体感兴趣，楼主的播放器我很喜欢，star 一个
    zeyexe
        8
    zeyexe  
       2019-05-04 10:46:09 +08:00
    @zhw2590582 #5 不好意思。没有注意到。完成度很高了。
    MyFaith
        9
    MyFaith  
       2019-05-04 11:00:27 +08:00
    @zhw2590582 Chrome 73.0.3683.103 / macOS Mojave 10.14.4
    zhw2590582
        10
    zhw2590582  
    OP
       2019-05-04 11:18:25 +08:00
    @MyFaith 是个 bug，已修复
    MyFaith
        11
    MyFaith  
       2019-05-04 17:32:15 +08:00
    @zhw2590582 又发现个问题...音量条把后面的问题挤下去了。https://myfaith-images.oss-cn-hongkong.aliyuncs.com/superbed/2019/05/04/5ccd5bd23a213b0417ad9627.jpg
    zhw2590582
        12
    zhw2590582  
    OP
       2019-05-04 17:54:42 +08:00
    @MyFaith 因为 demo 展示了太多控件，缩小屏幕是肯定会挤出来的，实际情况是可以通过监听缩放事件进行自适应的，但 demo 没写。
    MonoLogueChi
        13
    MonoLogueChi  
       2019-05-04 18:39:23 +08:00 via Android
    移动端还没有完成嘛
    zhw2590582
        14
    zhw2590582  
    OP
       2019-05-04 19:02:35 +08:00 via iPhone
    @MonoLogueChi 是的，移动端差异很大
    EridanusSora
        15
    EridanusSora  
       2019-05-04 21:20:39 +08:00
    那个背光的效果很有意思啊
    lawsiki
        16
    lawsiki  
       2019-05-05 14:13:32 +08:00
    已 star，另外请教个问题，播放 m3u8 的时候如何处理跨域问题？ crossOrigin: 'anonymous' 设置针对 m3u8 文件有效，但是请求 m3u8 里的视频片段还是会有跨域问题
    123s
        17
    123s  
       2019-05-05 14:59:17 +08:00
    支持弹幕吗
    zhw2590582
        18
    zhw2590582  
    OP
       2019-05-05 15:59:19 +08:00 via iPhone
    @lawsiki 前端能解决跨域的方法很有限，主要还是看后端的
    zhw2590582
        19
    zhw2590582  
    OP
       2019-05-05 16:00:33 +08:00 via iPhone
    @123s 支持的，Demo 里有例子，而且支持 b 站格式的弹幕
    123s
        20
    123s  
       2019-05-05 16:24:53 +08:00
    @zhw2590582 你这个不早点出来，做好了项目了，不想改了。我之前做了一套在线直播，都是用开源东西拼
    lawsiki
        21
    lawsiki  
       2019-05-05 18:08:31 +08:00
    @zhw2590582 #18 主要想写个插件替换下其他网站的播放器
    strugglexiang
        22
    strugglexiang  
       2019-07-04 16:26:02 +08:00
    这么强吗
    springuper
        23
    springuper  
       2019-07-10 17:24:25 +08:00
    楼主你好，我们是一家做北美市场流媒体服务的外企，坐标北京望京，目前团队正在寻找一位经验丰富且渴望挑战的专注于多媒体播放器的高级前端工程师，详情可参见帖子 https://www.v2ex.com/t/581357#reply6 可以看看是否有意向进一步接触～
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1001 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 19:54 · PVG 03:54 · LAX 11:54 · JFK 14:54
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.