搜索
首页web前端H5教程如何看待B站 (bilibili) 开源 HTML5 播放器内核 flv.js?

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的使用说明

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
H5:工具,框架和最佳实践H5:工具,框架和最佳实践Apr 11, 2025 am 12:11 AM

H5开发需要掌握的工具和框架包括Vue.js、React和Webpack。1.Vue.js适用于构建用户界面,支持组件化开发。2.React通过虚拟DOM优化页面渲染,适合复杂应用。3.Webpack用于模块打包,优化资源加载。

HTML5的遗产:当前了解H5HTML5的遗产:当前了解H5Apr 10, 2025 am 09:28 AM

HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee

H5代码:可访问性和语义HTMLH5代码:可访问性和语义HTMLApr 09, 2025 am 12:05 AM

H5通过语义化元素和ARIA属性提升网页的可访问性和SEO效果。1.使用、、等元素组织内容结构,提高SEO。2.ARIA属性如aria-label增强可访问性,辅助技术用户可顺利使用网页。

H5与HTML5相同吗?H5与HTML5相同吗?Apr 08, 2025 am 12:16 AM

"h5"和"HTML5"在大多数情况下是相同的,但它们在某些特定场景下可能有不同的含义。1."HTML5"是W3C定义的标准,包含新标签和API。2."h5"通常是HTML5的简称,但在移动开发中可能指基于HTML5的框架。理解这些区别有助于在项目中准确使用这些术语。

H5的功能是什么?H5的功能是什么?Apr 07, 2025 am 12:10 AM

H5,即HTML5,是HTML的第五个版本,它为开发者提供了更强大的工具集,使得创建复杂的网页应用变得更加简单。H5的核心功能包括:1)元素允许在网页上绘制图形和动画;2)语义化标签如、等,使网页结构清晰,利于SEO优化;3)新API如GeolocationAPI,支持基于位置的服务;4)跨浏览器兼容性需要通过兼容性测试和Polyfill库来确保。

h5链接怎么做h5链接怎么做Apr 06, 2025 pm 12:39 PM

如何创建 H5 链接?确定链接目标:获取 H5 页面或应用程序的 URL。创建 HTML 锚点:使用 <a> 标记创建锚点并指定链接目标URL。设置链接属性(可选):根据需要设置 target、title 和 onclick 属性。添加到网页:将 HTML 锚点代码添加到希望链接出现的网页中。

h5兼容问题怎么解决h5兼容问题怎么解决Apr 06, 2025 pm 12:36 PM

解决 H5 兼容问题的方法包括:使用响应式设计,允许网页根据屏幕尺寸调整布局。采用跨浏览器测试工具,在发布前测试兼容性。使用 Polyfill,为旧浏览器提供对新 API 的支持。遵循 Web 标准,使用有效的代码和最佳实践。使用 CSS 预处理器,简化 CSS 代码并提高可读性。优化图像,减小网页大小并加快加载速度。启用 HTTPS,确保网站的安全性。

h5怎么生成链接h5怎么生成链接Apr 06, 2025 pm 12:33 PM

h5页面可以通过两种方法生成链接:手动创建链接或使用短链接服务。通过手动创建,只需复制h5页面的URL即可;通过短链接服务,需将URL粘贴到服务中,然后获取缩短的URL。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)