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

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

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

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

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

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

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

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

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

    另外还是支持下~
    dangge
        64
    dangge  
       2016-10-27 15:55:09 +08:00
    1000star 贺电
    for8ever
        65
    for8ever  
       2016-10-27 16:21:43 +08:00
    JavaScript 可以转换视频格式了呀?
    xjbeta
        66
    xjbeta  
       2016-10-27 17:17:24 +08:00
    问题来了 直播什么时候支持 html5
    cesar
        67
    cesar  
       2016-10-27 17:19:37 +08:00
    @datou 我也是这样, HTML5 播放器,播放时间一长,就音画不同步了,必须重新拖一下进度条才行
    bsklqgy
        68
    bsklqgy  
       2016-10-27 17:19:50 +08:00
    youku 居然还不 html5
    typcn
        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 也会直接失败,所以只能在无劫持的情况下使用
    moyang
        70
    moyang  
       2016-10-27 17:47:41 +08:00
    支持一个。我们做的产品也有很多相似之处,对于 flash html5 mediasource extension hls.js hls 安卓原生 hls safari 原生当中的各种坑真是深有感触

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

    原来这样,谢谢解答,这几个月的确被劫持好烦..
    missingbobo
        75
    missingbobo  
       2016-10-28 14:50:24 +08:00
    @liujun3712 嗯,最好还要解决手机端看视频耗流量的问题
    nikubenki
        76
    nikubenki  
       2016-10-29 09:44:53 +08:00
    滋瓷
    xiaofami
        77
    xiaofami  
       2016-10-29 23:04:14 +08:00 via Android
    在 PS4 上全屏观看 bilibili 视频时每隔几秒便会闪现一下加载视频的小圆圈。进度条加载很快,不是网络问题。
    andypinet
        78
    andypinet  
       2016-10-31 16:22:28 +08:00
    全地图炮 如果 b 站用这个搞定 rtmp 我就让他叫我爹
    akinoneko
        79
    akinoneko  
       2016-11-01 10:49:21 +08:00
    赶快干死 flash
    shui14
        80
    shui14  
       2016-11-01 15:23:55 +08:00
    视频还是拼带宽,体验是最重要的, websocket 推流?
    ianzhou233
        81
    ianzhou233  
       2016-11-01 15:47:29 +08:00 via Android
    chrome 已经设置里面手动关闭 flash 了, chromebook 性能有限。似乎国内就 b 站 HTML5 。
    jyzhengqian
        82
    jyzhengqian  
    OP
       2016-11-01 21:49:29 +08:00
    @shui14 推流还是原生 rtmp 啊。目前来讲并没有在 web 端推流的需求吧
    redbelt
        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(…) 报错
    redbelt
        84
    redbelt  
       2016-11-25 11:07:32 +08:00
    woorst
        85
    woorst  
       2017-04-30 21:28:30 +08:00
    直播什么时候也能支持呢...
    ibegyourpardon
        86
    ibegyourpardon  
       2017-08-29 11:11:58 +08:00
    经过了一起事件之后再看这个帖子真的是物是人非造化弄人也不知道现在怎样了。
    abc635073826
        87
    abc635073826  
       2019-05-21 16:55:20 +08:00
    @jyzhengqian flv.js 支持 rtmp 推流的方式么?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2824 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 36ms · UTC 14:59 · PVG 22:59 · LAX 07:59 · JFK 10:59
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.