Rambling About flv.js

This post is a personal record written after being deeply touched by the flv.js creator’s story.

Nowadays, whenever web development touches on live streaming or video services, the go-to solutions are almost always hls.js or flv.js. Because browsers’ native video elements do not support these formats, you have to find a way to decode them yourself.

Back when Flash ruled the web, most of this could be handled by Flash. But as Flash was gradually phased out, people inevitably had to find alternative solutions. Media Source Extensions (MSE), introduced in recent years, solved this issue, but you have to read through the specs yourself, and there wasn’t much written about MSE online at the time. So the most convenient approach is to use ready-made libraries.

Back then, the most famous ones were Bilibili’s flv.js and hls.js.

What’s the Difference Between FLV and HLS?

FLV was introduced as a video format to solve the issue of exported Flash SWF files being too large, allowing video to be used efficiently over the network. So why can it be transmitted over the internet?

Generally speaking, if you wanted to play video directly via RTMP on a webpage, you had to decode it using Adobe Flash—this was the go-to solution before HTML5 matured. But as Flash became history and browsers blocked it one after another, a different approach became necessary. Running over the RTMP protocol tends to get blocked by firewalls, so running over HTTP is the most suitable method. Today, most live streaming protocols are based on HTTP-FLV.

MSE

A standard <video> tag can only support specific file formats (or containers). Therefore, unsupported formats like RTMP or m3u8 cannot be played directly using <video>.

To extend the capabilities of the original audio and video tags, when supported by the browser, you can use the MSE API to modify or read the video content, decode it yourself, and feed it into the <video> tag for playback. This effort usually requires an understanding of the protocols themselves or low-level knowledge of video encoding, not to mention the time needed for maintenance and debugging. That’s why flv.js and hls.js stood out—they effectively solved the front-end demand for video playback at the time.

Handling streaming or codecs like HLS is no easy task.

The Developer’s Story

This comes from a blog post by the core developer, Qianqian. Back when he was in high school, he already had the idea of repackaging FLV into MP4 to play it in the browser—meanwhile, I was just slacking off.

HLS already existed at the time, but the architecture of HLS wasn’t suitable for the progressive parsing requirements of FLV, so a new architecture had to be designed. The biggest challenge during development was probably browser compatibility. When it was being developed around 2015–2016, browser support was still unstable. To build flv.js, the author even dove into the chromium/media source code.

Feeling bored and burnt out with his current work, the author requested a role transfer to focus fully on developing flv.js. Even though flv.js successfully launched, not only did his manager not really care about the achievement, but he also received a “C” on his performance review.

“There are two employees: one is responsible for writing a large volume of relatively simple business logic with steady output; the other independently develops a core library that is difficult, technically demanding, has a long development cycle, and ultimately got blocked by external factors so it couldn’t launch on time. In the end, the first employee gets a high performance rating, while the second gets an extremely low score. Is this fair?”

After realizing that this business-driven company didn’t value deep technical output, the author quietly began planning his departure, while also hoping to open-source flv.js rather than let it rot inside the company.

Also, developers are human too—they have emotions and can feel dissatisfied with their situation. I personally feel very lucky to have joined some very challenging companies early in my career, where I could build what I wanted and explore different fields.

Conclusion

Nowadays, flv.js handles a massive portion of live streaming services. Even if teams build in-house solutions, I imagine they heavily reference the code inside flv.js. You can imagine his immense contribution to the software community and live streaming, and all of this came from a cool idea and the execution to back it up.

My first reaction after reading it was a strong sense of regret. Any developer who has used flv.js knows how massive his contribution was to HTML5 live streaming, yet the outcome inside a company was a “C” performance rating.

At the same time, I started reflecting: there are more and more APIs supported by browsers now, along with the recent buzz around WebAssembly. Although it’s becoming increasingly popular, it still feels like it’s mostly stuck in the phase of “look, I compiled language X into WebAssembly,” without seeing many truly practical applications yet.

Reflections

I’m about to turn 26. Although life has definitely improved since moving to work in Japan, there’s still a gap compared to what I had imagined. Since taking on the Tech Lead role, my productivity has been largely bogged down by writing documentation and tracking progress, leaving no time to sit down and just write code. Over time, it’s really left me feeling drained and mentally exhausted.

Fortunately, there’s still plenty of flexibility here to learn new things. My manager encourages me to pursue what I want to do, and there isn’t much pressure regarding performance reviews. But in terms of learning over the past few years, aside from touching things outside of front-end, I haven’t made significant progress.

Once you graduate, there’s hardly any time or energy left to dedicate to learning a complete body of knowledge from the ground up, which has been a source of anxiety and pressure for me. I used to care deeply about the evolution of technologies and tools, but in recent years, I’ve grown increasingly numb to it. Maybe one day, when I have enough resources, I’ll return to school to fill in the foundational knowledge I didn’t study properly and write the code I’ve always wanted to write. For now, I’ll just let things take their course.