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

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

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

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

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

    当然,还是非常鼓励知乎这样的开源技术行为,为你的勇气鼓掌!
        17
    malusama   51 天前   ♥ 1
    知乎的视频体验糟糕的要死
        18
    suxiaoxiann   51 天前
    知乎播放器真的垃圾
        19
    strpbrk   51 天前 via iPhone
    刷存在
        20
    KuzhiBake   51 天前 via Android
    这么影响用户体验的东西也好意思拿出来
        21
    tutustream   51 天前   ♥ 8
    这玩意开源是不是就是实在做不出来,所以扔出来让大家免费改 bug 的
        22
    hongch   51 天前
    所以那 1000 多的 star 都是内部员工点的吗?
        23
    PhpBestRubbish   51 天前
    真·面向 kpi 开源
        24
    strugglexiang   51 天前
    各位的评论把我逗笑了
        25
    xiaoyuhen   51 天前
    @Nicoco

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

    不管你 star 没,我反正 fork 了
        32
    glues   51 天前
    就没见过比知乎视频播放体验更差的播放器,91p 的都比你们好用
        33
    jefferycai   51 天前
    小编,我帮你测试吧。
    我测试了简单的 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>
        34
    jefferycai   51 天前
    是我的操作有问题么?
        35
    HorseMa   51 天前
    开源测试法?
        36
    xiaoyuhen   51 天前
    @jefferycai

    应该是 play_url,这里写错了,抱歉。
        38
    mggis0or1   51 天前 via Android
    评论区的老哥笑死我了
        39
    easylee   51 天前
    这是让大家帮着填坑啊!

    为了简历好看,我先上为敬。
        40
    liprais   51 天前 via iPhone
    面向 kpi 开源的车祸现场
        41
    FEDT   51 天前 via iPhone
    不是,不管知乎播放器烂不烂,开源总归是好的不是嘛
        42
    huch911   51 天前
    web 播放器,喷客户端的老哥们注意审题
        43
    wuchengkai0   51 天前
    @huch911 web 一样...
        44
    linghu1989122   51 天前
    知乎 APP 就是垃。。什么?这是 web 端?不好意思,走错片场了
        45
    jefferycai   51 天前
    @xiaoyuhen 晕死。
        46
    wangxiaoaer   51 天前
    @tutustream #21 我觉得这个可能性很高。
        47
    Benisme   51 天前
    @linghu1989122 辣鸡就是辣鸡,请一视同仁嗷
        48
    wunonglin   51 天前 via Android
    真还不如原生
        49
    vmskipper   51 天前
    知乎的东西 一如既往的。。。
        50
    meisky6666   51 天前 via Android
    这是让我们给他修 bug?
        51
    BigbyWolf   51 天前
    这是大知乎的诱导营销号盗视频填充流量战略失败了?当年不还要告蜂群吗?
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2349 人在线   最高记录 5043   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 24ms · UTC 14:08 · PVG 22:08 · LAX 07:08 · JFK 10:08
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1