Home>Article>Web Front-end> What do you think of Bilibili’s open source HTML5 player core flv.js?
flv.jsdoes three things:
1. HTML5 natively only supports playing mp4/webm format, flv.js implements playing FLV format video on HTML5
2. Make the Bilibili web page smoothly transition to HTML5 player, historical legacy is no longer an obstacle
3. For videos Live broadcast supports extremely low-latency HTTP FLV playback on HTML5, eliminating the dependence of web live broadcast on Flash
Some people asked me why I don’t directly use the MP4 format, and expressed their distaste for the FLV format
On the one hand, this problem is a legacy of history Problem, because the video website completely relies on Flash playback in the early stage and chooses the FLV format;
On the other hand, if you carefully study the FLV/MP4 packaging format, you will find that the FLV format is very simple, while the MP4 internal box has many types, complex and solid structure There is too much redundant data. FLV has inherent streaming characteristics and is suitable for network streaming, while MP4, the most widely used storage format, is not necessarily elegant in design.
I don’t want to talk about the pros and cons of multimedia encapsulation formats here. flv.js is a good example of implementing custom video format playback on HTML5, making full use of newer technologies on HTML5/Web such as Media Source Extensions, Fetch API and ECMAScript 6, and testing these APIs: During the development, it was discovered that there were bugs in Edge's support for the Fetch API. It was discovered that various browsers had some differences and problems in the implementation details of MSE. It was discovered that Safari's MSE implementation was less robust (funny)
In the early days of the flv.js project, Media Source Extensions (MSE) is unknown in China; while the MSE API has evolved over the past four years and is one of the most important APIs related to HTML5 multimedia. MSE is the key to realizing custom format playback on HTML5. The open source of flv.js also hopes that MSE can be more widely understood and applied.
Finally, browsers such as Chrome are accelerating the process of eliminating Flash. HTML5 video has been implemented by various browser manufacturers with high-performance hard resolution. MSE serves as a supplement to media format extensions. flv.js proves that current HTML5 multimedia technology has surpassed the old Flash . Amazing, my brother...
When the h5 player first came out, I guessed that Station B used emscripten to encapsulate C++ programs such as flv2mp4 (there is asm.js anyway), and then sliced them to the Blob API. Then Stream tags the video... After all, I have built a MIDI Player (https://ACGSounds.com), which is probably how I played... Then flv.js was open source... I was surprised! I actually read the metadata, AAC Stream and video stream directly using native js... and then remux
(I was inspired by videojs-contrib-hls to use emscripten for things like ffmpeg to make big news... That pack is really scary... This flv.js solves a difficulty in using flv as a video container and playing it in an html5 player.
However. . . The demand is not high. . . If I want to make a full html5 website, wouldn't it be better to save mp4?
But this is implemented by media source extension, which gives us a good positive example of using this interface. The thing is a good thing, but it has great limitations.
Other sites that use flv are going to continue to use flash to implement high-end advertising functions (such as mp4
Those third parties like us are blocked by cors and it is difficult to achieve
(Someone asked the relevant people earlier why they still have flv, flash will die sooner or later. The answer is "It's just a remux thing, and it doesn't cost much resources"... …)
But it’s not completely impossible
If a third party needs to introduce flv.js to play flv of station b, the simplest way is to use
http://xxx.xxx.xxx.xxx/ws.acgvYou can get playback support for any domain name by using the ideo.comaddressI am going to try support tonight
I have been working on it all night, but there is still no cors when the cache jumps, so I choose to give up It's very good. You can use this framework to modify an HLS player. This makes browser-side video live broadcast a third universal option in addition to FLASH and WebRTC.
Correction: I have not seen the code of hls.js, so I assume that it is converted from C++ code and cannot be maintained or modified. There are corrections in the comments, you can read the comments.
In addition, it seems that the infrastructure for Web-side video playback has slowly grown up. http+WebSocket+MSE+MPEG dash+Video tag+Audio tag+WebGL+WebRTC. These technologies should be able to combine to create a video playback system that is not weaker than native level (non-line editing) Don't think about mixing and mixing for now, it's not realistic). At present, the internal maturity of each module is not enough, but the development conditions for complex Web video applications are already ready. For other manufacturers who stick to flash for advertising, bilibili is a breath of fresh air. . .
I love this crappy website. . (゜-゜)つロ Let me just say one thing, being able to do this is indeed worthy of pride and pride, and the process of doing this is indeed worthy of admiration.
Front row membrane Qianqian. @qianqian I don’t care about flash roasted thighs or anything like that. Anyway, the temperature is only 50-60 degrees when the Shenzhou is fully loaded. . . What I care about is!
HTML5 can open dozens of videos without crashing!
If there are more than 7 flashes, you will definitely die! A good open source project. But it is more likely to become an experimental and backup solution.
Essentially, this relies on the implementation of Media Source Extensions.
This means that this thing is basically inaccessible to iOS Safari on the mobile side, thus cutting off the possibility of bringing flv playback in the browser to the mobile side in the short term.
In terms of implementation ideas, it is closer to hls.js, which is to pull the video resource slices yourself and then splice them and feed them to the video element.
Finally, I really hope this can go on for a long time, because this is another positive challenge I see to flash and video website solutions. Plus, it’s open source, open source, open source! Solved the problem of the computer taking off when watching Bilibili on Mac
By the way, since the major video websites have turned on the barrage function, as soon as I turn on the barrage function, the computer will take off. Come to think of it, Bilibili is still the conscience, as a non-stop I work in the front-end of RTB company, and I often deal with videos. I have replaced some video playback with flv.js. The process is not going well and I hope it will be better
The above is how to view the open source HTML5 player core flv of Bilibili (bilibili). For more details on js, please pay attention to other related articles on the php Chinese website!
Related articles: