V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
xiaoyuhen
V2EX  ›  JavaScript

知乎视频播放器 Griffith 开源了~

  •  7
     
  •   xiaoyuhen · 2019-04-03 19:30:45 +08:00 · 10830 次点击
    这是一个创建于 2059 天前的主题,其中的信息可能已经有所发展或是发生改变。

    知乎视频播放器 Griffith 开源介绍

    Griffith 是什么?

    Griffith 是一个基于 React 的视频播放器,目前已在知乎 web 和 mobile web 内使用,并在 GitHub 上开源。

    开源地址及示例

    GitHub 地址: https://github.com/zhihu/griffith

    CodeSandbox 示例: https://codesandbox.io/s/74olr5z02x

    特性

    简洁易用的 UI

    Griffith 提供了简洁易用的播放器 UI。目前知乎网页端视频播放器就是使用的 Griffith。

    Griffith

    快捷键支持

    Griffith 参考 YouTube 进行了快捷键支持,后续还会添加更多的快捷键。

    • 空格键:进度条处于选中状态时,可控制视频的播放 /暂停。如果已经选中某个按钮,则可用于点击该按钮。
    • K: 在播放器中暂停 /播放视频。
    • 选中进度条状态下的向左 /向右箭头:快进 /快退 5 秒钟。
    • J:在播放器中快退 10 秒。
    • L:在播放器中快进 10 秒。
    • 选中进度条状态下的向上 /向下箭头:将音量增大 /减小 5%。
    • 选中进度条状态下的数字 1 到 9 (不是数字小键盘上的数字):跳至视频进度的 10% 到 90%。
    • 选中进度条状态下的数字 0 (不是数字小键盘上的 0 ):跳至视频的开头。
    • F:启用全屏模式。如果已启用全屏模式,则再次按 F 键或按 Esc 键可退出全屏模式。
    • M:切换静音。

    React-friendly

    Griffith 是一个基于 React 开发的 web 视频播放器。对于 React 应用,可以直接通过组件调用的方式使用。

    Griffith 使用 Context API 进行状态管理。对于 React 应用,可以通过引入 Griffith 的 Context 来实现弹幕等自定义功能。

    免构建

    对于非 React 应用,或者不愿意通过 npm 包安装的用户,Griffith 提供 standalone 模式可以免构建工具直接在浏览器中使用。

    丰富的事件系统

    Griffith 定义了丰富的事件系统。

    对于视频播放器中常见的首帧时长,缓冲次数等指标,可以通过接收 Griffith 事件来进行打点记录。

    对于一些需要与播放器进行通信的功能,可以通过往 Griffith 发送事件来与播放器进行交互。

    流式播放

    Griffith 使用了 Media Source Extensions™ ,支持对 mp4 和 m3u8 格式的视频进行流式播放。

    • 预加载策略:Griffith 可以通过 MSE 动态控制视频加载进度,以达到节省视频 CDN 带宽等目地。
    • 动态平滑切换清晰度:Griffith 可以通过 MSE 实现动态平滑切换视频清晰度。

    如何使用

    ###React 应用

    import Player from 'griffith'
    
    const sources = {
      hd: {
        playurl: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018hd.mp4',
      },
      sd: {
        playurl: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018sd.mp4',
      },
    }
    
    render(<Player sources={sources} />)
    

    standalone 模式

    <div id="player"></div>
    <script src="https://unpkg.com/griffith-standalone/dist/index.umd.min.js"></script>
    <script>
      const target = document.getElementById('player')
    
      const sources = {
        hd: {
          playurl: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018hd.mp4',
        } ,
        sd: {
          playurl: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018sd.mp4',
        },
      }
    
      // 创建播放器
      const player = Griffith.createPlayer(target)
    
      // 载入视频
      player.render({sources})
    
      // 销毁视频
      player.dispose()
    </script>
    

    技术细节

    • 使用 Yarn workspace 和 Lerna 进行多包管理。
    • 使用 rollup 和 webpack 进行打包。
    • 使用 new Context API 进行状态管理。
    • 使用 CSS-in-JS 方案来管理样式。
    • 使用 Jest 来进行单元测试编写。
    • 使用 Prettier 进行代码格式统一。
    • 使用 hlsjs 流式播放 m3u8 格式视频。
    • 使用 griffith-mp4 把 mp4 格式转换为 fmp4 并通过 MSE 进行流式播放。

    结语

    Griffith 所有的工作都会在 GitHub 上进行(知乎内部使用的也是同一个仓库)。如果有任何相关的疑问和 bug,欢迎在 GitHub 提交 issue、PR 帮助 Griffith 变得更好。

    51 条回复    2019-04-04 21:15:18 +08:00
    alvin666
        1
    alvin666  
       2019-04-03 19:37:52 +08:00 via Android   ❤️ 27
    知乎播放器做的这么垃圾还来开源...
    不知道怎么回事每次 APP 和网页里面的视频加载很慢,然而把链接( i.vzuu.com )拿出来 Chrome 直接就能播,服了
    SimonOne
        2
    SimonOne  
       2019-04-03 19:54:40 +08:00   ❤️ 4
    想看看知乎视频加载只要失败就一直失败,除非强行停止再打开才能重新加载。是怎么实现的
    FrankFang128
        3
    FrankFang128  
       2019-04-03 19:57:50 +08:00   ❤️ 1
    知乎的前端水平……
    leeUp
        4
    leeUp  
       2019-04-03 19:58:53 +08:00 via iPhone
    我觉得微博的很好用 ios 下还可以拖拽退出
    misaka19000
        5
    misaka19000  
       2019-04-03 20:01:45 +08:00   ❤️ 3
    知乎的视频播放是真的垃圾,很多时候根本没办法正常使用。gif 图片播放也是一样,经常点击了然后就卡死
    xeaglex
        6
    xeaglex  
       2019-04-03 20:06:43 +08:00 via Android
    知乎视频播放器在 Firefox 下基本没有兼容性可言。。
    hanqian
        7
    hanqian  
       2019-04-03 20:12:52 +08:00   ❤️ 1
    知乎的视频播放器 LMAO
    hasaki1997
        8
    hasaki1997  
       2019-04-03 20:19:42 +08:00 via Android   ❤️ 2
    知乎安卓端的播放器,我印象中打开十次就有五次播放失败
    chengfeng
        9
    chengfeng  
       2019-04-03 20:25:15 +08:00 via iPhone   ❤️ 2
    app 上的播放器,宇宙最烂,没有之一
    mamahaha
        10
    mamahaha  
       2019-04-03 20:40:30 +08:00
    用开源的东西做出来的,不开源又能怎样。
    wxsm
        11
    wxsm  
       2019-04-03 20:43:50 +08:00   ❤️ 2
    em.... 看了一下貌似没什么亮点,我选择 videojs
    Les1ie
        12
    Les1ie  
       2019-04-03 20:44:23 +08:00   ❤️ 1
    还没点进来我就知道帖子回复会是什么样子的了 hhhh

    我也在想知道为什么即使百兆网络,在网页知乎里面点开视频也可以那么卡..
    andy12530
        13
    andy12530  
       2019-04-03 20:49:40 +08:00   ❤️ 2
    看到这么多人骂,我就放心了
    billlee
        14
    billlee  
       2019-04-03 22:04:20 +08:00
    日常崩溃
    yangsimonguo
        15
    yangsimonguo  
       2019-04-03 22:10:54 +08:00   ❤️ 3
    喜闻乐见的刷 25 分钟至乎后台 3.1K 个错误
    Nicoco
        16
    Nicoco  
       2019-04-03 23:39:15 +08:00
    移动端自定义 UI 会被实际环境打脸的,比如 X5 浏览器内核、比如 OPPO 浏览器、小米浏览器…… 这些劫持原生 video 标签,让你哭。

    当然,还是非常鼓励知乎这样的开源技术行为,为你的勇气鼓掌!
    malusama
        17
    malusama  
       2019-04-04 00:29:54 +08:00   ❤️ 1
    知乎的视频体验糟糕的要死
    suxiaoxiann
        18
    suxiaoxiann  
       2019-04-04 01:28:38 +08:00
    知乎播放器真的垃圾
    strpbrk
        19
    strpbrk  
       2019-04-04 06:30:27 +08:00 via iPhone
    刷存在
    KuzhiBake
        20
    KuzhiBake  
       2019-04-04 07:14:52 +08:00 via Android
    这么影响用户体验的东西也好意思拿出来
    tutustream
        21
    tutustream  
       2019-04-04 08:50:48 +08:00   ❤️ 8
    这玩意开源是不是就是实在做不出来,所以扔出来让大家免费改 bug 的
    hongch
        22
    hongch  
       2019-04-04 09:14:05 +08:00
    所以那 1000 多的 star 都是内部员工点的吗?
    PhpBestRubbish
        23
    PhpBestRubbish  
       2019-04-04 09:16:25 +08:00
    真·面向 kpi 开源
    strugglexiang
        24
    strugglexiang  
       2019-04-04 09:24:55 +08:00
    各位的评论把我逗笑了
    xiaoyuhen
        25
    xiaoyuhen  
    OP
       2019-04-04 10:26:14 +08:00
    @Nicoco

    移动端自定义 UI 没有做,因为手机浏览器劫持太严重,仅保留了基础播放功能。
    1v9
        26
    1v9  
       2019-04-04 10:35:32 +08:00
    这评论区哈哈
    ljspython
        27
    ljspython  
       2019-04-04 10:43:23 +08:00
    哈哈,评论笑尿
    impressioncr
        28
    impressioncr  
       2019-04-04 10:45:58 +08:00
    我选择西瓜播放器
    mnsw
        29
    mnsw  
       2019-04-04 10:51:10 +08:00   ❤️ 1
    这么垃圾还开源?这是内部搞不定,开源让人帮忙修复的意思?
    jefferycai
        30
    jefferycai  
       2019-04-04 10:54:10 +08:00
    小编,这是叫测试。不叫开源
    SEARCHINGFREE
        31
    SEARCHINGFREE  
       2019-04-04 10:56:42 +08:00
    emmm 各位老哥都这么暴躁吗

    不管你 star 没,我反正 fork 了
    glues
        32
    glues  
       2019-04-04 11:05:58 +08:00
    就没见过比知乎视频播放体验更差的播放器,91p 的都比你们好用
    jefferycai
        33
    jefferycai  
       2019-04-04 11:26:48 +08:00
    小编,我帮你测试吧。
    我测试了简单的 html demo,视频都不播放 [重点重点重点重点重点重点重点重点重点重点重点重点重点]
    引入了线上 js 路径,也有 mp4 资源。也把 scrpit 代码放到里面执行
    测试点:QQ 浏览器
    ------------------------- IS NO [不行]
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>123</title>
    </head>
    <body>
    <div id="player"></div>
    <script src="https://unpkg.com/griffith-standalone/dist/index.umd.min.js"></script>
    <script>
    const target = document.getElementById('player');

    const sources = {
    hd: {
    // https://zhstatic.zhihu.com/cfe/griffith/zhihu2018_hd.mp4
    playurl: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
    } ,
    sd: {
    // https://zhstatic.zhihu.com/cfe/griffith/zhihu2018_sd.mp4
    playurl: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
    },
    }

    // 创建播放器
    const player = Griffith.createPlayer(target)

    // 载入视频
    player.render({sources})

    // console.log(sources);
    // 销毁视频
    // player.dispose()
    </script>
    </body>
    </html>
    jefferycai
        34
    jefferycai  
       2019-04-04 11:27:31 +08:00
    是我的操作有问题么?
    HorseMa
        35
    HorseMa  
       2019-04-04 11:27:46 +08:00
    开源测试法?
    xiaoyuhen
        36
    xiaoyuhen  
    OP
       2019-04-04 11:53:26 +08:00
    @jefferycai

    应该是 play_url,这里写错了,抱歉。
    xiaoyuhen
        37
    xiaoyuhen  
    OP
       2019-04-04 11:54:29 +08:00
    scalaer
        38
    scalaer  
       2019-04-04 12:24:00 +08:00 via Android
    评论区的老哥笑死我了
    easylee
        39
    easylee  
       2019-04-04 12:28:25 +08:00
    这是让大家帮着填坑啊!

    为了简历好看,我先上为敬。
    liprais
        40
    liprais  
       2019-04-04 12:47:48 +08:00 via iPhone
    面向 kpi 开源的车祸现场
    FEDT
        41
    FEDT  
       2019-04-04 12:51:50 +08:00 via iPhone
    不是,不管知乎播放器烂不烂,开源总归是好的不是嘛
    huch911
        42
    huch911  
       2019-04-04 13:10:34 +08:00
    web 播放器,喷客户端的老哥们注意审题
    wuchengkai0
        43
    wuchengkai0  
       2019-04-04 13:16:11 +08:00
    @huch911 web 一样...
    linghu1989122
        44
    linghu1989122  
       2019-04-04 13:39:41 +08:00
    知乎 APP 就是垃。。什么?这是 web 端?不好意思,走错片场了
    jefferycai
        45
    jefferycai  
       2019-04-04 14:59:43 +08:00
    @xiaoyuhen 晕死。
    wangxiaoaer
        46
    wangxiaoaer  
       2019-04-04 15:03:33 +08:00
    @tutustream #21 我觉得这个可能性很高。
    Benisme
        47
    Benisme  
       2019-04-04 15:04:02 +08:00
    @linghu1989122 辣鸡就是辣鸡,请一视同仁嗷
    wunonglin
        48
    wunonglin  
       2019-04-04 15:08:01 +08:00 via Android
    真还不如原生
    vmskipper
        49
    vmskipper  
       2019-04-04 15:58:20 +08:00
    知乎的东西 一如既往的。。。
    meisky6666
        50
    meisky6666  
       2019-04-04 16:09:24 +08:00 via Android
    这是让我们给他修 bug?
    BigbyWolf
        51
    BigbyWolf  
       2019-04-04 21:15:18 +08:00
    这是大知乎的诱导营销号盗视频填充流量战略失败了?当年不还要告蜂群吗?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5304 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 40ms · UTC 01:26 · PVG 09:26 · LAX 17:26 · JFK 20:26
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.