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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 2948 天前的主题，其中的信息可能已经有所发展或是发生改变。

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 播放器~

flv

播放

html5

支持

87 条回复 • 2019-05-21 16:55:20 +08:00

kn007

2016-10-26 17:42:30 +08:00

支持一下

liujun3712

2016-10-26 17:43:32 +08:00 via Android

支持，想问一下能解决手机端看视频耗电的问题吗？

Tink

2016-10-26 17:47:46 +08:00 via iPhone

支持

jackysc

2016-10-26 17:49:29 +08:00

这两天新版 chrome 不能看直播了都是无法加载插件。。

ryanzyy

2016-10-26 17:53:16 +08:00

支持支持 B 站的用户体验十分不错

DoraJDJ

2016-10-26 17:55:06 +08:00 via Android

支持，求逸站赶紧干烂破 Flash

XhstormR

2016-10-26 17:58:46 +08:00

不要 FLV 格式就行了啊，用 MP4 格式不行吗？

xuwenhao

2016-10-26 18:02:28 +08:00 via iPhone

这个很赞啊

cxl008

2016-10-26 18:06:14 +08:00

cool

cxl008

2016-10-26 18:06:51 +08:00

不过话说回来，不开源这玩意是不是也很容易被拔下来。。。毕竟是 js

tabris17

2016-10-26 18:08:48 +08:00

其实就是把 FLV 封装的 H.264 视频转一下格式而已，并没有重新视频转码。这玩意儿限制性太大了，即便是服务器上做个格式转换也没多少开销

suconghou

2016-10-26 18:13:52 +08:00

赞! 不知道 m3u8 有没有原生的解决方案,不要 flash.现在貌似只有 safari 能原生播放 m3u8

Technetiumer

2016-10-26 18:21:45 +08:00

支持， B 站赶紧换掉 Flash

jyzhengqian

2016-10-26 18:23:57 +08:00

@suconghou https://github.com/dailymotion/hls.js

Akarin

2016-10-26 18:27:57 +08:00

很好，就是不明白， FLV 比 MP4 好在哪里。为什么一定要用。

binux

2016-10-26 18:32:49 +08:00

@XhstormR 不用存两份

qq529633582

2016-10-26 18:43:30 +08:00 via iPhone

资瓷

Phariel

2016-10-26 18:47:49 +08:00 via Android

这几天我从 APP 分享出去的 AV 号，用微信打开居然也有弹幕了。
HTML5 播放器已经不分 PC 端移动端全面实装了？

binux

2016-10-26 18:51:53 +08:00

用这个是不是能把「妈妈再也不用担心我的 MacBook 发热了计划 2 」拓展了？

wwqgtxx

2016-10-26 19:07:21 +08:00 via iPhone

@tabris17 服务器上那么多 TB EB 级别的 flv 转成 mp4 要废多大的劲，还有那么多缓存服务器要更新，与其改格式还不如在客户端下功夫

eastlhu

2016-10-26 19:29:06 +08:00 via iPhone

不错，学习一下

tuzkiss

2016-10-26 19:32:58 +08:00 via iPhone

厉害了，我的谦

cqxxxxxxx

2016-10-26 19:33:54 +08:00 via Android

问一下 html 怎么念……

DoraJDJ

2016-10-26 19:38:30 +08:00

@XhstormR +1
尤其是一些做 MAD 、鬼畜类视频的人， flv 不能直接放到 Vegas 、 AE 之类的软件里剪辑，又要转码，真的很痛苦

66450146

2016-10-26 19:39:19 +08:00

@binux 我看到标题想到的也是这个……尝试召唤 @zythum

zpole

2016-10-26 19:40:30 +08:00

支持～所以说什么时候 b 站直播也能换成 html5 ？

kaneyuki

2016-10-26 19:42:17 +08:00

这个可以啊

zhangneww

2016-10-26 19:44:37 +08:00

一直在用 html5 版的播放器

caonan

2016-10-26 19:53:01 +08:00

@wwqgtxx FLV 2 MP4 转封装的资源消耗不大，即时对外服务时实时转都可以，所有硬件资源彻底转一遍不是技术问题，而是领导决策问题

xmoiduts

2016-10-26 19:54:58 +08:00

我想反馈一点使用体验，本体验限于校园网。

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

2 ，有时 HTML5 播放器会出现“ HTTPS 连接失败，回退到 HTTP ”（大意）的字样。这是否意味着运营商做了手脚？

marsLeo

2016-10-26 20:13:32 +08:00

对视频网站来说，用 mp4 格式要不要为专利付费？

ChaosPark

2016-10-26 20:20:33 +08:00

B 站 html5 播放器反馈按钮无法反馈问题，我记得看 html5 播放有几个视频很卡顿，切换到 flash 播放器就正常了。

JoyNeop

2016-10-26 20:28:02 +08:00

膜谦谦！

JoyNeop

2016-10-26 20:29:20 +08:00

不过似乎看起来不是一个全功能的 Adobe Flash Player 的 JavaScript 移植？ 😂😂😂

donlxn22

2016-10-26 20:39:13 +08:00

Better to remove the word "F**k" from the demo : )

ctsed

2016-10-26 20:40:09 +08:00 via iPhone

可以这很节能

Tundra

2016-10-26 20:41:13 +08:00

@JoyNeop 来科学群里问

Tundra

2016-10-26 20:44:38 +08:00

@jackysc 直播方面有切换至 HTML5 的计划

addidd

2016-10-26 20:56:22 +08:00 via Android

兹瓷啦。。
话说最近番剧不能跳到 av 号看了。。 flash 好卡。。

digimoon

2016-10-26 21:55:07 +08:00

支持 H.264+AAC 编码的 FLV 视频

不如直接重新封装成 MP4

solonF

2016-10-26 22:03:34 +08:00

什么时候可以支持倍速播放

ETiV

2016-10-26 23:11:33 +08:00 via iPhone

这！个！屌！！！

jyzhengqian

2016-10-26 23:17:16 +08:00

@donlxn22 Fixed. 以前手抖的忘记清理了

Khlieb

2016-10-26 23:42:39 +08:00 via Android

直播时候管用吗？

wwqgtxx

2016-10-26 23:45:16 +08:00

@caonan 现实是决策层为啥要做这种没有意义的决策，从 FLV 转到 MP4 对性能没有任何的提升，却要付出大量的时间和精力去转换海量的数据，而且 B 站还有别的一堆接口还在用 flv ，为什么要做这种吃力不讨好的事情

wwqgtxx

2016-10-26 23:52:42 +08:00

从我们的角度看从 FLV 实时转到 Mp4 并费不了多少精力，但是对于那么海量的用户请求，那可不是增加一点点运算量
而且 flv 转换到 Mp4 虽然看着很简单，但是大部分情况下还是要重新封装，不是改个文件头那么简单的
虽然从个人角度来说， MP4 格式的确兼容性好，各方面都很优越，但是从人家公司角度考虑，的确是不如在播放器上动动手脚，把运算量丢给客户端来得快，来的经济

caonan

2016-10-26 23:58:42 +08:00

@wwqgtxx 我再仔细看了一遍题目后，觉得「这个场景下」通过客户端做挺好的，目前确实没有足够的理由让服务端去做这件事情，这个做法在客户端性能过剩的当下是完全说得过去的，甚至机智。

不过还是有点期待更统一或者平滑的方式，毕竟 HTML5 都这么些年了， FLV 的普及仍旧这么高

imgalaxy

2016-10-27 00:22:27 +08:00 via Android

可以这很谦谦

ershiwo

2016-10-27 00:41:53 +08:00

这个可以，给赞。

panlilu

2016-10-27 01:29:26 +08:00

已 star

RqPS6rhmP3Nyn3Tm

2016-10-27 04:39:00 +08:00 via iPad

不可以以后睿站上传视频默认 MP4,老视频也别转了回退 flv ，不是更好吗

cnbeining

2016-10-27 07:15:25 +08:00

@wwqgtxx 他选型的时候就有无数人提过了。

然并卵。

hellokittyer

2016-10-27 09:02:03 +08:00

自从发现 b 站可以体验 html5 播放器后， a 站就不怎么去了

Felldeadbird

2016-10-27 09:32:11 +08:00

可惜 B 站部分资源还不能 html5 播放

okampfer

2016-10-27 09:44:23 +08:00

@xmoiduts 成都电信 200M ，自从开始用 H5 播放器后，每到晚上我的体验跟你一样。

xmoiduts

2016-10-27 10:06:15 +08:00 via Android

还有一个问题，部分视频的前几秒会花屏，手动拖动进度条到开头后画面反而正常。怀疑第一个 I 帧解析有时出错。

heguannantc

2016-10-27 10:12:15 +08:00

不能看直播。。 h5 看超清就卡住但是高清就很丝滑。。不过还是支持。。不就是硬币吗。。给你就是了

nullizer

2016-10-27 10:12:44 +08:00

你们怎么把 flv 、 mp4 的封装规范理清楚的……

kaedea

2016-10-27 10:12:52 +08:00

厉害了我的倩

metalbug

2016-10-27 11:16:22 +08:00

支持 H265 就好了

ChiangDi

2016-10-27 11:22:45 +08:00 via Android

flv 已死。。。

datou

2016-10-27 13:58:20 +08:00

难怪 b 站 web 端的 h5 播放器容易音画不同步

SakuraKuma

2016-10-27 15:10:35 +08:00

我记得之前用过一段时间，
很容易 fetch error
后来就换回 flash 了。

另外还是支持下~

dangge

2016-10-27 15:55:09 +08:00

1000star 贺电

for8ever

2016-10-27 16:21:43 +08:00

JavaScript 可以转换视频格式了呀？

xjbeta

2016-10-27 17:17:24 +08:00

问题来了直播什么时候支持 html5

cesar

2016-10-27 17:19:37 +08:00

@datou 我也是这样， HTML5 播放器，播放时间一长，就音画不同步了，必须重新拖一下进度条才行

bsklqgy

2016-10-27 17:19:50 +08:00

youku 居然还不 html5

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

2016-10-27 17:47:41 +08:00

支持一个。我们做的产品也有很多相似之处，对于 flash html5 mediasource extension hls.js hls 安卓原生 hls safari 原生当中的各种坑真是深有感触

flash 已经为我们做得够多。在视频播放领域，就让它安静地退休吧！

zuoxiaomo

2016-10-27 19:06:44 +08:00

@jackysc 昨晚也遇到了，更新下 adobe flash player 就可以了

LeoEatle

2016-10-27 19:08:02 +08:00

@Akarin flv 是历史原因了吧...我记得我当年还在 B 站发视频时都用的 flv...

zuoxiaomo

2016-10-27 19:08:40 +08:00

B 站看电影偶尔遇到音 /视频不同步问题（ HTML5 ）。。。

SakuraKuma

2016-10-28 08:58:17 +08:00

@typcn

原来这样,谢谢解答,这几个月的确被劫持好烦..

missingbobo

2016-10-28 14:50:24 +08:00

@liujun3712 嗯，最好还要解决手机端看视频耗流量的问题

nikubenki

2016-10-29 09:44:53 +08:00

滋瓷

xiaofami

2016-10-29 23:04:14 +08:00 via Android

在 PS4 上全屏观看 bilibili 视频时每隔几秒便会闪现一下加载视频的小圆圈。进度条加载很快，不是网络问题。

andypinet

2016-10-31 16:22:28 +08:00

全地图炮如果 b 站用这个搞定 rtmp 我就让他叫我爹

akinoneko

2016-11-01 10:49:21 +08:00

赶快干死 flash

shui14

2016-11-01 15:23:55 +08:00

视频还是拼带宽，体验是最重要的， websocket 推流？

ianzhou233

2016-11-01 15:47:29 +08:00 via Android

chrome 已经设置里面手动关闭 flash 了， chromebook 性能有限。似乎国内就 b 站 HTML5 。

jyzhengqian

2016-11-01 21:49:29 +08:00

@shui14 推流还是原生 rtmp 啊。目前来讲并没有在 web 端推流的需求吧

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

2016-11-25 11:07:32 +08:00

找到了。。。 https://github.com/Bilibili/flv.js/issues/11

woorst

2017-04-30 21:28:30 +08:00

直播什么时候也能支持呢...

ibegyourpardon

2017-08-29 11:11:58 +08:00

经过了一起事件之后再看这个帖子真的是物是人非造化弄人也不知道现在怎样了。

abc635073826

2019-05-21 16:55:20 +08:00

@jyzhengqian flv.js 支持 rtmp 推流的方式么？