首页   注册   登录
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 · 289 天前 · 7400 次点击
    这是一个创建于 289 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

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

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