LV（Flash Video）流媒体格式，是随着 Flash MX 的推出发展而来的视频格式。其文件体积小，一般1分钟只占1MB，是普通视频文件大小的1/3，且视频质量良好，广受视频网站欢迎。然而，FLV 格式往往利用 Flash Player 进行解码播放，但如今，主流浏览器都已经放弃支持 Flash Playe。同时，HTML5 原生的 video 标签并不支持 FLV 格式。如何在 HTML5 时代，还能发挥 FLV 视频格式的优势呢？作为一个蓬勃发展中的视频网站，bilibili 开源了 FLV 视频的 HTML5 播放器，使得 HTML5 与 FLV 得以结合。

简介

Flv.js，是 bilibili（哔哩哔哩）在 Github 上开源的 HTML5 的 FLV 视频播放器，项目位于 https://github.com/bilibili/flv.js，目前版本为 v1.5.0。Flv.js 支持 H.264 + AAC/MP3 编码的 FLV 视频，支持视频分片，支持低延迟的 HTTP/WebSocket 协议的 FLV 格式的直播视频流，兼容 Chrome、Firefox、Safari 10、IE 11 和 Edge，具有极低的消耗，支持浏览器硬件加速。原理上，Flv.js 把 FLV 视频流转码为 ISO BMFF（切片的MP4），然后把切片放到 HTML 的 video 元素中进行播放。

安装

Flv.js 可以使用 NPM 直接安装，加入到前端项目依赖中：

npm install --save flv.js

也可以使用国内镜像的 CNPM 进行安装：

cnpm install --save flv.js

还可以在本地进行构建：

npm install             # 安装开发依赖
npm install -g gulp  # 安装构建工具 gulp
gulp release           # 构建发布

Flv.js 使用 ECMAScript 6 编写，使用 Babel Compiler 转译到 ECMAScript5，并使用 Browserify 进行打包。

示例

Flv.js 的架构设计如下：

核心部分为 FlvDemuxer 和 MP4Remuxer，分别对 FLV 视频进行分离，和封装为 MP4 视频。内部通过多个Controller控制器，发送指令，对数据流的操作进行控制。

Flv.js 使用简单，通过接口 createPlayer 实例化播放器，配置对应的视频源，然后，挂载到 DOM 容器上，并调用 load() 进行加载，调用 play() 进行播放：

<script src="flv.min.js"></script>
<video id="videoElement"></video>
<script>
    if (flvjs.isSupported()) {
        var videoElement = document.getElementById('videoElement');
        var flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url: 'http://example.com/flv/video.flv'
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
    }
</script>

注意到，flv.js 提供了 isSupported 接口，可以很方便地判断 Flv.js 是否支持当前的浏览器环境。Flv.js提供了一个测试用的 demo 页面，可以进行视频播放的测试：

Flv.js 主要提供了3个函数：

• flvjs.createPlayer()：接受配置，实例化播放器
• flvjs.isSupported()：是否支持当前浏览器
• flvjs.getFeatureList()：支持的特性的列表

还有3个类：

• flvjs.FlvPlayer：FLV 播放器
• flvjs.NativePlayer：原生 HTML5 播放器，可以用户单 MP4 文件的播放
• flvjs.LoggingControl：日志控制

以及3个枚举：

• flvjs.Events：播放器事件
• flvjs.ErrorTypes：错误类型
• flvjs.ErrorDetails：错误具体信息

使用时的主要接口是 createPlayer，它的函数签名如下：

function createPlayer(mediaDataSource: MediaDataSource, config?: Config): Player;

其中 mediaDataSource 进行视频流配置，常用的参数包括：

• type：视频类型，flv 或 mp4
• isLive：是否为直播视频流
• cors：获取视频数据时是否启用 CORS
• url：视频流地址
• segments：视频切片配置

而 config 进行 flv.js 播放器内部配置，包括worker、缓存、加载策略等的配置。

对于体积较大的视频，往往在服务器中会进行切片处理。Flv.js 支持对于切片视频的加载播放，通过提供 segments 配置。segments 是一个切片配置的列表，每个配置包括了视频长度、文件大小和视频地址：

"segments": [
        {
            "duration": 1234,  // in milliseconds
            "filesize": 5678,  // in bytes
            "url": "http://cdn.flvplayback.com/segments-1.flv"
        },
        {
            "duration": 2345,
            "filesize": 6789,
            "url": "http://cdn.flvplayback.com/segments-2.flv"
        },
        {
            "duration": 4567,
            "filesize": 7890,
            "url": "http://cdn.flvplayback.com/segments-3.flv"
        }
        // more segments...
    ]

Flv.js 支持直播视频流的播放，通过 isLive 配置实现，支持 HTTP 协议的视频流：

{
    // HTTP FLV
    "type": "flv",
    "isLive": true,
    "url": "http://127.0.0.1:8080/live/livestream.flv"
}

以及 WebSocket 协议的视频流：

{
    // FLV over WebSocket
    "type": "flv",
    "isLive": true,
    "url": "ws://127.0.0.1:9090/live/livestream.flv"
}

总结

Flv.js 作为一个 HTML5 视频播放器，实现了通过原生 Javascript，在 HTML5 页面上进行 FLV 视频的播放，充分利用了 FLV 格式优秀的体积和质量，提供了更为优秀的播放体验，降低了视频服务器和负荷，同时支持切片、直播、懒加载等进阶特性，功能丰富。Flv.js 目前已被广泛应用到视频播放网站中，使用者众多，同时代码质量高，值得使用、研究和学习。

文首发于什么值得买平台请关注本账号获取更多好文，作者：值行

大家好，我是值行的白色闪电——小白。

如果说眼睛是心灵的窗口，那浏览器就是互联网的眼睛。我们工作学习的大部分时间都在和浏览器打交道，一款优秀的浏览器简直是工作的小帮手，生活的小贴士，可以给我们的精神世界带来潜移默化的影响。但IE除外：

2020年，我的身边已经没有人用IE了，这款浏览器成为了一个没有灵魂的jpg图标。小时候用IE玩4399时欢乐的笑容依旧回荡在耳边，那是我们逝去的青春。

后IE时代，大家都在用什么浏览器呢？今天我们就来看一看：

2020年了，国内网友们都在用什么浏览器？

在权威数据网站statcounter上我们可以看到目前各浏览器的用户占比：

（数据截止至2019年6月）

根据数据可知，国内Chrome用户比例超过50%，占据半壁江山，远超其他浏览器。

随后的浏览器用户占比差距就不大了，排名第二的UC浏览器占比只有12.49%，是排名第一的Chrome的四分之一左右。Safari由于是IOS系统的自带浏览器，安卓用户无法使用，我们这里就不分析了。

排名第四的QQ浏览器用户占比为11.18%，IE浏览器仅为3.18%，

考虑到用户占比和产品特点，本篇文章我们选择Chrome、UC浏览器、QQ浏览器这三款浏览器来分析他们各自的优缺点。

1.Chrome

由Google公司发布于2008年9月2日，该浏览器基于其他开源软件撰写，包括WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。

苹果 App Store评分：

Google Play评分：

为什么要叫Chrome呢？Chrome是元素“铬”的英文，是世界上最硬的纯金属，且铬的化合物呈现红黄绿等多种颜色。从名字就能看出Chrome的初心——做一个有姿态的实力派。

Chrome的初始页面是Google的搜索框和可自行编辑的快捷网站。地址栏非常简单，标签页细长，不会让人产生拥挤感，地址栏可以兼用作搜索栏。Chrome给人最直接的感受是简洁舒适，像是一块全面屏的手机。

亮点介绍：说起Chrome，最大的亮点一定是市场里功能齐全的插件，屏蔽广告、下载网页视频、动态截图等超实用的功能简直是重新定义浏览器。

这里我们不说Chrome自带的扩展程序市场，小编为大家推荐一个高分插件合集网站：极简插件。极简插件里有每个插件详细的下载地址和安装教程，新手也能轻松搞定插件。下面为大家推荐几款热门的实用扩展程序：

①广告拦截 uBlock Origin

一款高效的请求过滤工具：占用极低的内存和CPU，和其他常见的过滤工具相比，它能够加载并执行上千条过滤规则。用法：点击弹出窗口中的电源按钮，uBlock₀ 将对当前网页永久禁用/启用过滤功能，它只控制当前网页的请求过滤。

Chrome最好的广告拦截器之一，速度更快，资源消耗更低。

② vip视频解析

使用方法：打开想要看的视频，弹出VIP观看窗口，点击打开插件，选择一个网站打开，如果不行就换一个网站或者换线路，或者在其他视频网站找到该资源，然后选择一个网站，因为不同的解析网站对爱奇艺，优酷等的支持不一样。

别开会员了，小编包养你。

③ 哔哩哔哩助手_bilibili helper

哔哩哔哩弹幕网辅助扩展，可以替换 HTML5 播放器、绕过区域限制、推送通知、下载B站视频等。

干♂杯！

④ 眼不见心不烦（新浪微博）

被强行推送的广告微博刷得搓火？被新版微博巨型配图搞得反胃？5个屏蔽用户名额不够用，又不想交钱开通会员？新浪微博非官方功能增强插件“眼不见心不烦”可以无限制地屏蔽关键词、用户、来源，去除页面广告和推广微博。

还你一个干净的微博。

⑤ 什么值得买 实时推送

这不是自家广告，这是广大值友的福音。先让我们进一段自我介绍：“什么值得买”是一个中立的，致力于帮助广大网友买到更有性价比网购产品的推荐类博客。“什么值得买”的目的是在帮助网友控制网购的风险的同时，尽可能的向大家介绍高性价比的网购产品，让大家买着不心疼，花钱等于省钱。薅羊毛省钱神器，让你一边看剧一边把羊毛薅了。

永远比别人先一步剁手。

⑥ 百度药丸 Baidu Capsule

屏蔽百度线上产品页面广告(搜索、新闻、贴吧、知道、音乐、图片、视频、文库等)。可当书签用，省去每次输入百度地址的麻烦。

无论如何，小编一定要把这款插件放上来。万恶的百度，用无数令人发指的新闻和广告充斥着用户的每一寸屏幕，而我们不可能随时都能用到隔壁的Google。因此，在和baidu打交道的每一秒里，都需要自爱。吃一颗百度药丸，原地复活。

*彩蛋

这个页面相信很多人都不陌生，一只充满绝望的恐龙，他的出现意味着：你网没了。

但是很多人不知道的是，这只恐龙居然是Chrome的一个小游戏彩蛋。在页面中按一下方向键↑，这只恐龙居然就活了。游戏很简单，通过方向键↑键跳跃恐龙躲躲避障碍物。断网之际扫雷都能大战三百回合，这个解闷应该不成问题。

现在出现这个页面不用绝望，说不定玩到一半网就来了。

总结

优点：①速度快 ②页面简洁 ③同步Google生态，个人数据不怕丢 ④扩展程序多 ⑤自带网页翻译

缺点：①与国内很多网站缺少兼容 ②Flash等插件有时会被阻挡

2.UC浏览器

UC重点布局品质生活内容生态，提供即时、丰富、优质内容，通过内容推动认知升级，让更多用户对更好的商品、服务和体验拥有全新的感知。

苹果Apple Store评分：

Google Play评分：

除了震惊部外，UC居然还有浏览器。

2014年6月11日，阿里巴巴集团宣布全面收购优视科技。UC浏览器从此成为了阿里旗下的大将。

2016年8月23日，UC在北京市举行战略升级发布会，宣布“UC浏览器”正式升级为“UC”，向“大数据新型媒体平台”全面升级。

UC浏览器的初始界面和Chrome有挺大差别，一眼就能看出UC的产品价值观——为用户提供丰富的资讯。

UC浏览器的初始界面自带国内著名的电商、资讯、搜索引擎等传送门，往下滑就是根据大数据推送的UC头条资讯。关于浏览器自带资讯这件事，有人觉得很干扰浏览器使用，有人觉得让浏览器功能丰富化，实在是仁者见仁智者见智。

亮点介绍：UC浏览器最大的亮点在于资讯和浏览器的一体化，手机端与电脑端可以同步数据。

UC的扩展插件相比Chrome要少很多，这里小编为大家介绍几个商城中的热门插件：

① 捕捉网页截图 - FireShot

捕捉网页截图，编辑并将它们保存为PDF，JPEG，PNG；上传，打印，在Photoshop中打开，复制到剪贴板或电子邮件

小编自用的截图插件，这款插件在Chrome上也有。它好用在截图的过程中也可以滚动网页截取后面的内容，使用起来非常灵活，强烈推荐。

② Video Downloader GetThemAll

嗅探页面链接、图片、音频、视频、文档等各种资源，并提供下载功能。支持自定义选择下载类型

掘地三尺把视频挖出来下载，从此看剧不联网。

③ Adblock Plus

Adblock Plus 是世界上最流行的广告过滤插件，仅支持在极速内核。当出现提示“视频无法播放”或“浏览器不兼容”等问题时，请停用此插件。

免费高效无广告。

④ 淘货源

超4亿淘宝天猫海量同款货源快速发现，利润high翻天！安装后，浏览淘宝页面自动推荐1688优质同款货源！

总结

优点：①资讯丰富 ②手机电脑端资料同步 ③兼容性好

缺点：①广告多 ②插件多 ③可扩展程序有限

3.QQ浏览器

采用全新架构并针对IE内核做了全面优化。瞬间开启的超快体验，灵动轻逸的全新设计，更有强大的安全保障。旨在带来更轻、更快、更安全的浏览体验，给用户一个既纯净又简约的上网环境。

苹果 App Store评分：

Google Play评分：

无

腾讯的QQ浏览器采用Chromium内核+IE双内核，让浏览快速稳定，拒绝卡顿，完美支持HTML5和各种新的Web标准。

同时可以安装众多Chrome的拓展，支持QQ快捷登录，登录浏览器后即可自动登录腾讯系网页。

QQ浏览器的初始界面是传统的站点导航界面，在这里你基本上可以找到所有常用网站。搜索引擎可以在搜狗、Google、Bing和百度之间切换，很灵活。

亮点介绍：QQ浏览器有一个腾讯独家功能，那就是浏览器里自带微信。

点击左侧的工具栏就可以扫码登录微信，边上网边聊天，带来更为高效的微信沟通体验。

QQ浏览器有自己的插件商城，里面种类还算多样，小编为大家推荐这几款插件：

① 二维码(QR码)生成器(QR Code Generator)

可以生成当前页面二维码,手机直接扫二维码就可以访问当前页面。

② iCloud 书签

使您 Windows 上的 Chrome 书签与您的 iPhone、iPad 和 Mac 上的 Safari 书签保持一致。

③ 搜狗打假助手

利用大数据，提取全网购物经验，帮你识别真假网购。一秒钟识别假货!剁手族的福音!

④ Adobe Acrobat

将当前网页转换为 Adobe PDF 文件（仅限 Windows）。

⑤ The Great Suspender

冻结暂时用不到的标签页，以便释放系统资源。

总结

优点：①小巧，启动速度快 ②腾讯生态内，数据同步QQ账号，不易丢失 ③自带微信小程序，交流灵活

缺点：①内存占用偏高

好了，本期简单的浏览器评测和插件推荐到这里就结束了，你在用哪款浏览器？最想吐槽哪款浏览器？欢迎在评论区说出你的故事~

未经授权，不得转载