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

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

Mar 18, 2017 am 09:41 AM
bilibili com flv github https

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

热AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

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

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

bilibili缓存的视频在手机哪里 bilibili缓存的视频在手机哪里 Mar 21, 2024 pm 02:28 PM

哔哩哔哩缓存的视频保存位置位于手机存储路径中,具体位置为:Android/data/tv.danmaku.bili/download/。打开哔哩哔哩,缓存要保存的视频,在该路径下按时间顺序找到视频文件夹,其中video.m4s和audio.m4s分别包含视频和音频。

鸿蒙原生应用随机诗词 鸿蒙原生应用随机诗词 Feb 19, 2024 pm 01:36 PM

想了解更多关于开源的内容,请访问:51CTO鸿蒙开发者社区https://ost.51cto.com运行环境DAYU200:4.0.10.16SDK:4.0.10.15IDE:4.0.600一、创建应用点击File->newFile->CreateProgect。选择模版:【OpenHarmony】EmptyAbility:填写项目名,shici,应用包名com.nut.shici,应用存储位置XXX(不要有中文,特殊字符,空格)。CompileSDK10,Model:Stage。Device

如何在 Windows 11/10 上安装 GitHub Copilot 如何在 Windows 11/10 上安装 GitHub Copilot Oct 21, 2023 pm 11:13 PM

GitHubCopilot是编码人员的下一个级别,它基于AI的模型可以成功预测和自动完成您的代码。但是,您可能想知道如何在您的设备上加入这个AI天才,以便您的编码变得更加容易!但是,使用GitHub并不是很容易,初始设置过程是一个棘手的过程。因此,我们创建了这个分步教程,介绍如何在Windows11、10上的VSCode中安装和实现GitHubCopilot。如何在Windows上安装GitHubCopilot此过程有几个步骤。因此,请立即执行以下步骤。步骤1–您必须在计算机上安装最新版本的可视

如何使用Nginx Proxy Manager实现HTTPS协议下的反向代理 如何使用Nginx Proxy Manager实现HTTPS协议下的反向代理 Sep 26, 2023 am 08:40 AM

如何使用NginxProxyManager实现HTTPS协议下的反向代理近年来,随着互联网的普及和应用场景的多样化,网站和应用程序的访问方式变得越来越复杂。为了提高网站的访问效率和安全性,很多网站开始采用反向代理来处理用户的请求。而针对HTTPS协议的反向代理,在保护用户隐私和确保通信安全性方面扮演着重要的角色。本文将介绍如何使用NginxProxy

如何使用Nginx Proxy Manager实现HTTP到HTTPS的自动跳转 如何使用Nginx Proxy Manager实现HTTP到HTTPS的自动跳转 Sep 26, 2023 am 11:19 AM

如何使用NginxProxyManager实现HTTP到HTTPS的自动跳转随着互联网的发展,越来越多的网站开始采用HTTPS协议来加密传输数据,以提高数据的安全性和用户的隐私保护。由于HTTPS协议需要SSL证书的支持,因此在部署HTTPS协议时需要有一定的技术支持。Nginx是一款强大且常用的HTTP服务器和反向代理服务器,而NginxProxy

Nginx与SSL:配置HTTPS保护Web服务器 Nginx与SSL:配置HTTPS保护Web服务器 Jun 09, 2023 pm 09:24 PM

Nginx是一个高性能的Web服务器软件,同时也是一款强大的反向代理服务器和负载均衡器。随着互联网的迅速发展,越来越多的网站开始采用SSL协议保护敏感用户数据,而Nginx也提供了强大的SSL支持,使得Web服务器的安全性能更进一步。本文将介绍如何配置Nginx以支持SSL协议,并保护Web服务器的安全性能。什么是SSL协议?SSL(SecureSocke

bilibili的视频怎么保存到本地?电脑版b站缓存视频到本地的方法 bilibili的视频怎么保存到本地?电脑版b站缓存视频到本地的方法 Mar 13, 2024 pm 10:25 PM

  bilibili是当下最受欢迎的视频弹幕网站,如果看到感兴趣的视频,很多用户都会选择将其缓存下来。那么b站怎么缓存下载视频到本地呢?其实方法并不难,下面小编就给大家分享一下电脑版b站缓存视频到本地的方法。  b站怎么缓存下载视频到本地在浏览器地址栏中输入ibilibili,然后按回车。会弹出一个下载页面,您可以将鼠标悬停在视频上,选择“另存为”,即可将视频下载到本地。  2、在bilibili后面加上jj变成bilibilijj也是一样,也有下载的页面。  3、看简介和评论,有些UP主或者其

Ubuntu上的Git安装过程 Ubuntu上的Git安装过程 Mar 20, 2024 pm 04:51 PM

Git是一个快速、可靠、适应性强的分布式版本控制系统。它旨在支持分布式的非线性工作流,使其成为各种规模的软件开发团队的理想选择。每个Git工作目录都是一个独立的存储库,具有所有更改的完整历史记录,并能够跟踪版本,即使没有网络访问或中央服务器。GitHub是托管在云上的Git存储库,它提供了分布式修订控制的所有功能。GitHub是Git的存储库,托管在云上。与作为CLI工具的Git不同,GitHub有一个基于Web的图形用户界面。它用于版本控制,这涉及到与其他开发人员协作,并跟踪随时间推移对脚本和

See all articles