Flv.js — HTML5 FLV Player Without Flash

Introduction

Flv.js is a pure JavaScript FLV player created by Bilibili that leverages the Media Source Extensions API to play FLV streams in modern browsers. It eliminates the need for Flash while supporting both live streaming (HTTP-FLV) and recorded FLV playback with low latency.

What Flv.js Does

• Plays FLV video in HTML5 browsers using MSE without Flash
• Supports HTTP-FLV live streams and FLV-over-WebSocket
• Handles FLV files with H.264 video and AAC/MP3 audio codecs
• Provides multi-segment playback for concatenating multiple FLV sources
• Offers a Chrome DevTools extension for real-time debugging

Architecture Overview

Flv.js works by demuxing FLV containers into H.264 and AAC elementary streams in JavaScript, then remuxing them into ISO BMFF (fMP4) segments. These segments are fed into the browser's Media Source Extensions API for native hardware-accelerated decoding and rendering. The loader module supports multiple transport protocols including HTTP with Range requests, WebSocket, and chunked transfer for live streams.

Self-Hosting & Configuration

• Install via npm or include the pre-built script from a CDN
• Configure the player with a simple object specifying type, url, and optional parameters
• Enable CORS headers on your streaming server for cross-origin playback
• Set enableWorker: true for Web Worker-based parsing on heavy workloads
• Adjust lazyLoadMaxDuration and seekType for VOD optimization

Key Features

• Pure JavaScript with zero plugin dependencies
• Low-latency HTTP-FLV live stream playback
• Hardware-accelerated decoding through native browser APIs
• Multi-part segment support for seamless concatenation
• Detailed event and statistics API for monitoring

Comparison with Similar Tools

• Video.js — full-featured general player; Flv.js is FLV-specific with lower overhead
• HLS.js — targets HLS protocol; Flv.js handles FLV/HTTP-FLV natively
• DPlayer — UI-rich player that can use Flv.js as its FLV backend
• Shaka Player — DASH-focused by Google; Flv.js is optimized for FLV live streaming

FAQ

Q: Does Flv.js work on mobile browsers? A: It works on browsers that support Media Source Extensions. Most Android Chrome browsers support it, but iOS Safari has limited MSE support.

Q: What codecs does Flv.js support? A: H.264 for video and AAC or MP3 for audio, which are the standard codecs in FLV containers.

Q: Can I use Flv.js for live streaming? A: Yes, Flv.js supports HTTP-FLV and WebSocket-FLV live streams with low latency.

Q: Is Flash required at all? A: No. Flv.js uses MSE exclusively and has no Flash dependency.

Sources

• https://github.com/bilibili/flv.js
• https://github.com/nicklockwood/iCarousel