This is a series of articles, using pseudo-code to step through the FLV soft-coded to MP4
Https://github.com/332065255/flv2fmp4
code Base
Soft-coded FLV to MP4 container (i)
Soft-coded FLV to MP4 container (ii) FLV tag Disassembly
Soft-coded FLV to MP4 container (iii) FLV METADATA tag parsing
Soft-coded FLV to MP4 container (iv) Fmp4 Overview and basic commentary
Soft-coded FLV to MP4 container (v) Fmp4 Ftyp box and Moov>mvhd Box detailed
Soft-coded FLV to MP4 container (vi) Fmp4 MOOV>TRAK>TKHD box and MOOV>TRAK>MDIA>MDHD Box explained
Soft-coded FLV to MP4 container (vii) Fmp4 MDIA>HDLR box and mdia>minf> SMHD and Dinf Box explained
Soft-coded FLV to MP4 container (eight) Fmp4 mdia>stbl>stsd box explanation
Soft-coded FLV to MP4 container (ix) fmp4 stts STSC stsz Stco Box Explained
Soft-coded FLV to MP4 container (10) Fmp4 Mvex Box explanation
Soft-coded FLV to MP4 container (11) Fmp4 moof Box detailed
Soft-coded FLV to MP4 container (12) Fmp4 Mdat Box detailed
Soft-coded FLV to MP4 container (13) Fmp4 generate Ftyp and moov the necessary FLV data in essence This is an explanation of flv.js explaining how FLV is converted into MP4
There is not a small amount of information online about MP4, but there is almost no way to tell a container from a pseudo-code level to another container, which is why you write a series of articles.
This article is mainly about parsing FLV format video, detailed FLV knowledge please see this blog
http://blog.csdn.net/leixiaohua1020/article/details/17934487
FLV format is very simple
FLV Head >4 Bytes Last tags size >metadata tags>4 bytes 4 bytes Last tags size > video tags>4 bytes last tags size > audio tags>4 bytes last tags size > .... >4 bytes Last tags size
It's basically a format.
So decoding FLV is also very simple
We're dividing it into 3 parts.
METADATA Tag |
Video Tag |
Audio Tag |
There is only one |
There are multiple |
There are multiple |
First, the FLV is loaded into a binary array in any way
<body> <div> Drag flv files here </div> <script type= "Text/javascript" src
= "Bound.js" ></script> <script> var dropbox=document.queryselector (' body div ');
Dropbox.addeventlistener ("DragOver", function (e) {e.stoppropagation ();
E.preventdefault ();
}, False);
Dropbox.addeventlistener ("Drop", function (e) {e.stoppropagation ();
E.preventdefault ();
var reader = new FileReader ();
Reader.addeventlistener ("Load", processflv, false);
Reader.readasarraybuffer (E.datatransfer.files[0]);
}, False);
function processflv (e) {var buffer=e.target.result;
var uint8=new uint8array (buffer); Console.log (uint8); Drag-and-drop FLV video into a 2 binary array flvparse.setflv (UINT8);//Still into converter} </script> </body>
This code in the project inside the index.html inside, this chapter is finished, the next chapter explains the FLV parsing