這是一篇系列文章,用僞代碼來一步步講解flv 軟編碼到mp4
https://github.com/332065255/flv2fmp4
代碼庫
軟編碼Flv 到Mp4 容器(一)
軟編碼Flv 到Mp4 容器(二) flv tag拆解
軟編碼Flv 到Mp4 容器(三) flv metadata tag解析
軟編碼Flv 到Mp4 容器(四) fmp4 總覽和基礎講解
軟編碼Flv 到Mp4 容器(五) fmp4 ftyp box 和moov>mvhd box詳解
軟編碼Flv 到Mp4 容器(六) fmp4 moov>trak>tkhd box 和 moov>trak>mdia>mdhd box講解
軟編碼Flv 到Mp4 容器(七) fmp4 mdia>hdlr box 和 mdia>minf> smhd 和dinf box講解
軟編碼Flv 到Mp4 容器(八) fmp4 mdia>stbl>stsd box 講解
軟編碼Flv 到Mp4 容器(九) fmp4 stts stsc stsz stco box 講解
軟編碼Flv 到Mp4 容器(十) fmp4 mvex box 講解
軟編碼Flv 到Mp4 容器(十一) fmp4 moof box詳解
軟編碼Flv 到Mp4 容器(十二) fmp4 mdat box詳解
軟編碼Flv 到Mp4 容器(十三) fmp4 生成ftyp和moov所必要的 flv數據
本質上這是一篇對flv.js的解釋,解釋flv如何轉換成mp4的
現在網上關於mp4的資料不算少,但是從僞代碼層級講述一個容器到另一個容器的幾乎沒有,這也是爲什麼要寫這麼一篇系列文章.
這一篇主要講了解析flv格式的視頻,詳細flv知識請看下面這篇博客
http://blog.csdn.net/leixiaohua1020/article/details/17934487
flv格式非常簡單
flv頭部>4字節上個tags大小>metadata tags>4字節4字節上個tags大小>視頻tags>4字節上個tags大小>音頻tags>4字節上個tags大小 > ..........>4字節上個tags大小基本就是這麼一個格式
所以解碼flv也非常簡單
我們將其分成 3部分
| metadata tag | video tag | audio tag |
|---|---|---|
| 有且僅有一個 | 有且有多個 | 有且有多個 |
首先不管用任何方式,將flv加載成二進制數組
<body>
<div>
將flv文件拖入此處
</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); //將拖拽入的flv視頻轉成了2進制數組
flvParse.setFlv(uint8);//仍入轉換器
}
</script>
</body>
這段代碼在工程裏面的index.html裏面,本章完畢,下一章講解flv解析