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

Bilibili 向 HTML5 进发,播放器内核 flv.js 开源

  •  5
     
  •   jyzhengqian · 2016-10-26 17:37:34 +08:00 · 25164 次点击
    这是一个创建于 1121 天前的主题,其中的信息可能已经有所发展或是发生改变。

    https://github.com/Bilibili/flv.js

    原生 HTML5 仅支持播放 mp4/webm ,于是我们做了一个使 HTML5 支持播放 FLV 视频的播放内核。

    flv.js 在 JavaScript 中流式解析 flv 文件流并实时转封装为 fmp4 ,通过 Media Source Extensions 喂给浏览器,实现了 FLV 格式视频的播放。

    我们实现了:

    • 支持 H.264+AAC 编码的 FLV 视频
    • 支持多段视频无缝播放
    • 支持 HTTP FLV 超低延迟直播流播放(远低于 HLS ,与 RTMP 一致)
    • 支持在 WebSocket 上承载的 FLV 直播流
    • 支持所有主流浏览器 (Chrome, FireFox, IE11, Edge 和 Safari 10)
    • 极低的运行开销,享受浏览器硬件解码,告别 Flash 暖手时代

    另:可以在 http://www.bilibili.com/html/help.html#p 试用我们的 HTML5 播放器~

    87 回复  |  直到 2019-05-21 16:55:20 +08:00
        1
    kn007   2016-10-26 17:42:30 +08:00
    支持一下
        2
    liujun3712   2016-10-26 17:43:32 +08:00 via Android
    支持,想问一下能解决手机端看视频耗电的问题吗?
        3
    Tink   2016-10-26 17:47:46 +08:00 via iPhone
    支持
        4
    jackysc   2016-10-26 17:49:29 +08:00
    这两天新版 chrome 不能看直播了 都是无法加载插件。。
        5
    ryanzyy   2016-10-26 17:53:16 +08:00
    支持支持 B 站的用户体验十分不错
        6
    DoraJDJ   2016-10-26 17:55:06 +08:00 via Android
    支持,求逸站赶紧干烂破 Flash
        7
    XhstormR   2016-10-26 17:58:46 +08:00   ♥ 3
    不要 FLV 格式就行了啊,用 MP4 格式不行吗?
        8
    xuwenhao   2016-10-26 18:02:28 +08:00 via iPhone
    这个很赞啊
        9
    cxl008   2016-10-26 18:06:14 +08:00
    cool
        10
    cxl008   2016-10-26 18:06:51 +08:00
    不过话说回来,不开源 这玩意是不是也很容易被拔下来。。。毕竟是 js
        11
    tabris17   2016-10-26 18:08:48 +08:00
    其实就是把 FLV 封装的 H.264 视频转一下格式而已,并没有重新视频转码。这玩意儿限制性太大了,即便是服务器上做个格式转换也没多少开销
        12
    suconghou   2016-10-26 18:13:52 +08:00
    赞! 不知道 m3u8 有没有原生的解决方案,不要 flash.现在貌似只有 safari 能原生播放 m3u8
        13
    Technetiumer   2016-10-26 18:21:45 +08:00
    支持, B 站赶紧换掉 Flash
        14
    jyzhengqian   2016-10-26 18:23:57 +08:00
        15
    Akarin   2016-10-26 18:27:57 +08:00
    很好,就是不明白, FLV 比 MP4 好在哪里。为什么一定要用。
        16
    binux   2016-10-26 18:32:49 +08:00
    @XhstormR 不用存两份
        17
    qq529633582   2016-10-26 18:43:30 +08:00 via iPhone
    资瓷
        18
    Phariel   2016-10-26 18:47:49 +08:00 via Android
    这几天我从 APP 分享出去的 AV 号,用微信打开居然也有弹幕了。
    HTML5 播放器已经不分 PC 端移动端全面实装了?
        19
    binux   2016-10-26 18:51:53 +08:00
    用这个是不是能把「妈妈再也不用担心我的 MacBook 发热了计划 2 」拓展了?
        20
    wwqgtxx   2016-10-26 19:07:21 +08:00 via iPhone
    @tabris17 服务器上那么多 TB EB 级别的 flv 转成 mp4 要废多大的劲,还有那么多缓存服务器要更新,与其改格式还不如在客户端下功夫
        21
    eastlhu   2016-10-26 19:29:06 +08:00 via iPhone
    不错,学习一下
        22
    tuzkiss   2016-10-26 19:32:58 +08:00 via iPhone
    厉害了,我的谦
        23
    cqxxxxxxx   2016-10-26 19:33:54 +08:00 via Android
    问一下 html 怎么念……
        24
    DoraJDJ   2016-10-26 19:38:30 +08:00
    @XhstormR +1
    尤其是一些做 MAD 、鬼畜类视频的人, flv 不能直接放到 Vegas 、 AE 之类的软件里剪辑,又要转码,真的很痛苦
        25
    66450146   2016-10-26 19:39:19 +08:00
    @binux 我看到标题想到的也是这个……尝试召唤 @zythum
        26
    zpole   2016-10-26 19:40:30 +08:00
    支持~所以说什么时候 b 站直播也能换成 html5 ?
        27
    kaneyuki   2016-10-26 19:42:17 +08:00
    这个可以啊
        28
    zhangneww   2016-10-26 19:44:37 +08:00
    一直在用 html5 版的播放器
        29
    caonan   2016-10-26 19:53:01 +08:00
    @wwqgtxx FLV 2 MP4 转封装的资源消耗不大,即时对外服务时实时转都可以,所有硬件资源彻底转一遍不是技术问题,而是领导决策问题
        30
    xmoiduts   2016-10-26 19:54:58 +08:00
    我想反馈一点使用体验,本体验限于校园网。

    1 ,在 FLASH 播放器时代,贵站视频可以从头缓冲到尾。切换为 HTML5 后,常常不能缓冲全视频。应该是做了缓冲控制。
    对于一些慢速网络而言,能否提供缓冲全视频的选项,使得用户可以“养肥了再看”?

    2 ,有时 HTML5 播放器会出现“ HTTPS 连接失败,回退到 HTTP ”(大意)的字样。这是否意味着运营商做了手脚?
        31
    marsLeo   2016-10-26 20:13:32 +08:00
    对视频网站来说,用 mp4 格式要不要为专利付费?
        32
    ChaosPark   2016-10-26 20:20:33 +08:00
    B 站 html5 播放器反馈按钮无法反馈问题,我记得看 html5 播放有几个视频很卡顿,切换到 flash 播放器就正常了。
        33
    JoyNeop   2016-10-26 20:28:02 +08:00
    膜谦谦!
        34
    JoyNeop   2016-10-26 20:29:20 +08:00
    不过似乎看起来不是一个全功能的 Adobe Flash Player 的 JavaScript 移植? 😂😂😂
        35
    donlxn22   2016-10-26 20:39:13 +08:00
    Better to remove the word "F**k" from the demo : )
        36
    ctsed   2016-10-26 20:40:09 +08:00 via iPhone
    可以这很节能
        37
    Tundra   2016-10-26 20:41:13 +08:00
    @JoyNeop 来科学群里问
        38
    Tundra   2016-10-26 20:44:38 +08:00
    @jackysc 直播方面有切换至 HTML5 的计划
        39
    addidd   2016-10-26 20:56:22 +08:00 via Android
    兹瓷啦。。
    话说最近番剧不能跳到 av 号看了。。 flash 好卡。。
        40
    digimoon   2016-10-26 21:55:07 +08:00
    支持 H.264+AAC 编码的 FLV 视频

    不如直接重新封装成 MP4
        41
    solonF   2016-10-26 22:03:34 +08:00
    什么时候可以支持倍速播放
        42
    ETiV   2016-10-26 23:11:33 +08:00 via iPhone
    这!个!屌!!!
        43
    jyzhengqian   2016-10-26 23:17:16 +08:00
    @donlxn22 Fixed. 以前手抖的忘记清理了
        44
    Khlieb   2016-10-26 23:42:39 +08:00 via Android
    直播时候管用吗?
        45
    wwqgtxx   2016-10-26 23:45:16 +08:00
    @caonan 现实是决策层为啥要做这种没有意义的决策,从 FLV 转到 MP4 对性能没有任何的提升,却要付出大量的时间和精力去转换海量的数据,而且 B 站还有别的一堆接口还在用 flv ,为什么要做这种吃力不讨好的事情
        46
    wwqgtxx   2016-10-26 23:52:42 +08:00   ♥ 1
    从我们的角度看从 FLV 实时转到 Mp4 并费不了多少精力,但是对于那么海量的用户请求,那可不是增加一点点运算量
    而且 flv 转换到 Mp4 虽然看着很简单,但是大部分情况下还是要重新封装,不是改个文件头那么简单的
    虽然从个人角度来说, MP4 格式的确兼容性好,各方面都很优越,但是从人家公司角度考虑,的确是不如在播放器上动动手脚,把运算量丢给客户端来得快,来的经济
        47
    caonan   2016-10-26 23:58:42 +08:00
    @wwqgtxx 我再仔细看了一遍题目后,觉得「这个场景下」通过客户端做挺好的,目前确实没有足够的理由让服务端去做这件事情,这个做法在客户端性能过剩的当下是完全说得过去的,甚至机智。

    不过还是有点期待更统一或者平滑的方式,毕竟 HTML5 都这么些年了, FLV 的普及仍旧这么高
        48
    imgalaxy   2016-10-27 00:22:27 +08:00 via Android
    可以 这很谦谦
        49
    ershiwo   2016-10-27 00:41:53 +08:00
    这个可以,给赞。
        50
    panlilu   2016-10-27 01:29:26 +08:00
    已 star
        51
    BXIA   2016-10-27 04:39:00 +08:00 via iPad
    不可以以后睿站上传视频默认 MP4,老视频也别转了回退 flv ,不是更好吗
        52
    cnbeining   2016-10-27 07:15:25 +08:00
    @wwqgtxx 他选型的时候就有无数人提过了。

    然并卵。
        53
    hellokittyer   2016-10-27 09:02:03 +08:00
    自从发现 b 站可以体验 html5 播放器后, a 站就不怎么去了
        54
    Felldeadbird   2016-10-27 09:32:11 +08:00
    可惜 B 站部分资源还不能 html5 播放
        55
    okampfer   2016-10-27 09:44:23 +08:00
    @xmoiduts 成都电信 200M ,自从开始用 H5 播放器后,每到晚上我的体验跟你一样。
        56
    xmoiduts   2016-10-27 10:06:15 +08:00 via Android
    还有一个问题,部分视频的前几秒会花屏,手动拖动进度条到开头后画面反而正常。怀疑第一个 I 帧解析有时出错。
        57
    heguannantc   2016-10-27 10:12:15 +08:00
    不能看直播。。 h5 看超清就卡住但是高清就很丝滑。。不过还是支持。。不就是硬币吗。。给你就是了
        58
    nullizer   2016-10-27 10:12:44 +08:00
    你们怎么把 flv 、 mp4 的封装规范理清楚的……
        59
    kaedea   2016-10-27 10:12:52 +08:00
    厉害了我的倩
        60
    metalbug   2016-10-27 11:16:22 +08:00
    支持 H265 就好了
        61
    ChiangDi   2016-10-27 11:22:45 +08:00 via Android
    flv 已死。。。
        62
    datou   2016-10-27 13:58:20 +08:00
    难怪 b 站 web 端的 h5 播放器容易音画不同步
        63
    SakuraKuma   2016-10-27 15:10:35 +08:00
    我记得之前用过一段时间,
    很容易 fetch error
    后来就换回 flash 了。

    另外还是支持下~
        64
    dangge   2016-10-27 15:55:09 +08:00
    1000star 贺电
        65
    for8ever   2016-10-27 16:21:43 +08:00
    JavaScript 可以转换视频格式了呀?
        66
    xjbeta   2016-10-27 17:17:24 +08:00
    问题来了 直播什么时候支持 html5
        67
    cesar   2016-10-27 17:19:37 +08:00
    @datou 我也是这样, HTML5 播放器,播放时间一长,就音画不同步了,必须重新拖一下进度条才行
        68
    bsklqgy   2016-10-27 17:19:50 +08:00
    youku 居然还不 html5
        69
    typcn   2016-10-27 17:40:07 +08:00
    @datou
    @SakuraKuma
    @cesar
    音画不同步是 Safari 的 BUG , Safari 播放任何格式任意编码的视频时间长了都这样。

    Fetch Error 是由于运营商的 302 劫持导致的,因为 HTML5 有 CORS 限制, preflight 的请求如果遇到 302 会直接失败, preflight 成功之后如果再响应 302 也会直接失败,所以只能在无劫持的情况下使用
        70
    moyang   2016-10-27 17:47:41 +08:00
    支持一个。我们做的产品也有很多相似之处,对于 flash html5 mediasource extension hls.js hls 安卓原生 hls safari 原生当中的各种坑真是深有感触

    flash 已经为我们做得够多。在视频播放领域,就让它安静地退休吧!
        71
    zuoxiaomo   2016-10-27 19:06:44 +08:00   ♥ 1
    @jackysc 昨晚也遇到了,更新下 adobe flash player 就可以了
        72
    LeoEatle   2016-10-27 19:08:02 +08:00
    @Akarin flv 是历史原因了吧...我记得我当年还在 B 站发视频时都用的 flv...
        73
    zuoxiaomo   2016-10-27 19:08:40 +08:00
    B 站看电影偶尔遇到音 /视频不同步问题( HTML5 )。。。
        74
    SakuraKuma   2016-10-28 08:58:17 +08:00
    @typcn

    原来这样,谢谢解答,这几个月的确被劫持好烦..
        75
    missingbobo   2016-10-28 14:50:24 +08:00
    @liujun3712 嗯,最好还要解决手机端看视频耗流量的问题
        76
    nikubenki   2016-10-29 09:44:53 +08:00
    滋瓷
        77
    xiaofami   2016-10-29 23:04:14 +08:00 via Android
    在 PS4 上全屏观看 bilibili 视频时每隔几秒便会闪现一下加载视频的小圆圈。进度条加载很快,不是网络问题。
        78
    andypinet   2016-10-31 16:22:28 +08:00
    全地图炮 如果 b 站用这个搞定 rtmp 我就让他叫我爹
        79
    akinoneko   2016-11-01 10:49:21 +08:00
    赶快干死 flash
        80
    shui14   2016-11-01 15:23:55 +08:00
    视频还是拼带宽,体验是最重要的, websocket 推流?
        81
    ianzhou233   2016-11-01 15:47:29 +08:00 via Android
    chrome 已经设置里面手动关闭 flash 了, chromebook 性能有限。似乎国内就 b 站 HTML5 。
        82
    jyzhengqian   2016-11-01 21:49:29 +08:00
    @shui14 推流还是原生 rtmp 啊。目前来讲并没有在 web 端推流的需求吧
        83
    redbelt   2016-11-25 11:04:47 +08:00
    demo 怎么用不了 <input name="urlinput" class="urlInput" type="text" value="http://127.0.0.1/flv/7182741.json"/>

    我把这个地址换乘我 flv 的地址也不行。。

    VM47:1 Uncaught SyntaxError: Unexpected token F in JSON at position 0(…) 报错
        84
    redbelt   2016-11-25 11:07:32 +08:00
        85
    woorst   2017-04-30 21:28:30 +08:00
    直播什么时候也能支持呢...
        86
    ibegyourpardon   2017-08-29 11:11:58 +08:00
    经过了一起事件之后再看这个帖子真的是物是人非造化弄人也不知道现在怎样了。
        87
    abc635073826   184 天前
    @jyzhengqian flv.js 支持 rtmp 推流的方式么?
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2689 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 33ms · UTC 13:01 · PVG 21:01 · LAX 05:01 · JFK 08:01
    ♥ Do have faith in what you're doing.