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賬號，不易丟失 ③自帶微信小程序，交流靈活

缺點：①內存占用偏高

好了，本期簡單的瀏覽器評測和插件推薦到這里就結束了，你在用哪款瀏覽器？最想吐槽哪款瀏覽器？歡迎在評論區說出你的故事~

未經授權，不得轉載