欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

如何看待B站 (bilibili) 开源 HTML5 播放器内核 flv.js?

程序员文章站 2022-03-11 10:25:23
...
flv.js 做了三件事:

1. HTML5 原生仅支持播放 mp4/webm 格式,flv.js 实现了在 HTML5 上播放 FLV 格式视频
2. 使 Bilibili 网页端平滑过度到 HTML5 播放器,历史遗留不再是障碍
3. 对于视频直播,在 HTML5 上支持了延迟极低 HTTP FLV 播放,解开网页端直播对 Flash 的依赖
一些人问我为什么不直接采用 MP4 格式,并表示对 FLV 格式的厌恶
这个问题一方面是历史遗留问题,由于视频网站前期完全依赖 Flash 播放而选择 FLV 格式;
另一方面,如果仔细研究过 FLV/MP4 封装格式,你会发现 FLV 格式非常简洁,而 MP4 内部 box 种类繁杂,结构复杂固实而又有太多冗余数据。FLV 天生具备流式特征适合网络流传输,而 MP4 这种使用最广泛的存储格式,设计却并不一定优雅。
这里我不想谈论多媒体封装格式的优劣。flv.js 是在 HTML5 上实现自定义视频格式播放的一个较好的范例,充分利用了 Media Source Extensions, Fetch API 以及 ECMAScript 6 等 HTML5/Web 上较新的技术,并考验着这些 API:开发期间发现 Edge 对 Fetch API 的支持存在 bug,发现各个浏览器在 MSE 的实现细节上都有一些差异和问题,发现 Safari 的 MSE 实现健壮度较差(滑稽)
在 flv.js 项目初期,Media Source Extensions (MSE) 在国内处于无人问津的状态;而 MSE API 已经过近 4 年的发展演进,是 HTML5 多媒体相关最重要的 API 之一。MSE 是 HTML5 上实现自定义格式播放的关键,flv.js 开源也是希望 MSE 能被更广泛地了解和应用。
最后,Chrome 等浏览器正在加速 Flash 淘汰的进程,HTML5 video 由各浏览器厂商实现了高性能硬解,MSE 作为媒体格式扩展的补充,flv.js 证明了当前 HTML5 多媒体技术已超越陈旧的 Flash。 厉害了我的哥……
刚出来 h5 播放器的时候我猜测了一下,大概是 B 站用 emscripten 封装了 flv2mp4 一类的 c++ 程序(反正有 asm.js 嘛),然后 slice 一下交给 Blob API 然后 Stream 给 video tag…毕竟自己搞过一个 MIDI Player (ACGSounds.com) 大概是这么玩的…然后 flv.js 开源了…了…大吃一惊!竟然用 native js 直接读了一遍 metadata, AAC Stream 和视频流…然后 remux
(我曾经受 videojs-contrib-hls 启发把 ffmpeg 一类的东西用 emscripten 造大新闻…那个 pack 实在是太恐怖了…… 这个flv.js解决了使用flv作为视频容器,并在html5播放器播放出来的一个难点。
不过。。。需求不高。。。如果我要做全html5的网站,存mp4不就好了。
不过这个是media source extension实现的,算是给了我们一个用这个接口的不错的正面例子。 东西是个好东西,但局限性很大
别的站用flv的准备继续用flash来实现高端的广告功能(如x酷)
而使用html5播放器的大部分网站都会选择将视频存储转为纯mp4
像我们这些第三方的却又被cors阻挡难以实现
(早前有人问过相关人为什么还存flv,flash迟早要死。回答说“不就是个remux的事,又费不了多少资源”……)
不过也不是完全没有路
如果第三方需要引入flv.js来播放b站flv,最简单的方法,使用xxx.xxx.xxx.xxx/ws.acgv地址就可以获得任意域名播放支持
今晚我那边是准备进行尝试支持的
做了一晚上,但是缓存跳转的时候还是没有cors,所以选择放弃 挺好的,用这个框架能改出个 HLS 播放器来。这就使得浏览器端视频直播除了 FLASH 和 WebRTC 之外有了第三种普适的选择。
更正一下:我没看过 hls.js 的代码,想当然的认为是 C++ 代码转的,没法维护修改。评论中有指正,大家可以看评论。
另外,目前看来 Web 端视频播放的基础设施已经慢慢地生长起来了,http+WebSocket+MSE +MPEG dash+Video标签+Audio标签+WebGL+WebRTC,这几项技术应该能组合出不弱于 native 级的视频播放系统(非线编辑和混音暂时就别想了,不太现实),目前暂时每一个模块内部成熟度还不够,不过 Web 视频复杂应用的开发条件已经呼之欲出了。 对于其他为了广告守着 flash 的厂商来说,bilibili 是一股清流。。。
我爱死这个破网站了。。( ゜- ゜)つロ 我就说一句,能做出来这个,确实很值得骄傲和自豪,而且这个的过程,确实值得敬佩。
前排膜qianqian。@谦谦 我不在乎什么flash烤大腿之类的,反正神船满载也就50-60度。。。我在意的是!
HTML5开几十个视频不崩溃啊!
flash超过7个必死无疑! 不错的开源项目。不过更有可能成为一个试验性的和备用的方案。
本质上来说这个是依赖于 Media Source Extensions 这个实现的。
这就意味着这个东西在移动端基本上是面对 ios safari 这个无解的东西,从而把 flv 在浏览器中播放带给移动端的可能性在短期内斩断了。
在实现思路上来讲,比较接近 hls.js ,就是自己拉取视频资源切片然后拼接喂给 video 元素。
最后非常希望这项能长久的走下去,因为这是我看到的又一次对 flash 和视频网站解决方案积极挑战。还有,它是开源的、开源的、开源的! 解决了mac看B站 电脑起飞的问题
顺便补一句,自打各大视频网站开启了弹幕功能,我只要一打开弹幕功能电脑就起飞了,想想,还是B站良心,作为一只不入流混迹在RTB公司的前端汪,没少和视频打交道,已经把部分视频播放替换成flv.js 过程不太顺利 期待更好

以上就是如何看待B站 (bilibili) 开源 HTML5 播放器内核 flv.js的详细内容,更多请关注其它相关文章!

相关文章:

全面解读flv.js代码

开源代码flv.js的使用说明