Maison > interface Web > Tutoriel H5 > 如何看待B站 (bilibili) 开源 HTML5 播放器内核 flv.js?

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

PHP中文网
Libérer: 2017-03-18 09:41:10
original
12865 Les gens l'ont consulté

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的详细内容,更多请关注php中文网其它相关文章!

相关文章:

全面解读flv.js代码

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

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal