H.264層級（Level）計算機（JavaScript網頁版）

最後更新：2018-12-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

　　上回我們學會了怎麼計算層級（H.264 層級（Level）、DPB 與 MaxDpbMbs 詳解）。但是每次手工計算就太麻煩了，我們希望有一款工具能完成這些運算。最好該工具還能跨平台使用。

　　在綜合考慮上面的需求和開發難度性後，我決定編寫一個JavaScript網頁程式。

　　最終效果——

　　其實開發難度並不大，只要熟悉上回的層級計算公式，就能很容易實現。全部代碼如下——

<!DOCTYPE html PUBLIC "-//W3C//Dtd XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/Dtd/xhtml1-transitional.dtd"><html><head><title>H.264 Level Calculator</title><meta content="text/html; charset=utf-8" http-equiv="Content-Type"><script type="text/javascript">// varvar tblLevels = [{Level:"1", MaxDpbMbs:396, MaxSecondMbs:1485, MaxFrameMbs:99},{Level:"1b", MaxDpbMbs:396, MaxSecondMbs:1485, MaxFrameMbs:99},{Level:"1.1", MaxDpbMbs:900, MaxSecondMbs:3000, MaxFrameMbs:396},{Level:"1.2", MaxDpbMbs:2376, MaxSecondMbs:6000, MaxFrameMbs:396},{Level:"1.3", MaxDpbMbs:2376, MaxSecondMbs:11880, MaxFrameMbs:396},{Level:"2", MaxDpbMbs:2376, MaxSecondMbs:11880, MaxFrameMbs:396},{Level:"2.1", MaxDpbMbs:4752, MaxSecondMbs:19800, MaxFrameMbs:792},{Level:"2.2", MaxDpbMbs:8100, MaxSecondMbs:20250, MaxFrameMbs:1620},{Level:"3", MaxDpbMbs:8100, MaxSecondMbs:40500, MaxFrameMbs:1620},{Level:"3.1", MaxDpbMbs:18000, MaxSecondMbs:108000, MaxFrameMbs:3600},{Level:"3.2", MaxDpbMbs:20480, MaxSecondMbs:216000, MaxFrameMbs:5120},{Level:"4", MaxDpbMbs:32768, MaxSecondMbs:245760, MaxFrameMbs:8192},{Level:"4.1", MaxDpbMbs:32768, MaxSecondMbs:245760, MaxFrameMbs:8192},{Level:"4.2", MaxDpbMbs:34816, MaxSecondMbs:522240, MaxFrameMbs:8704},{Level:"5", MaxDpbMbs:110400, MaxSecondMbs:589824, MaxFrameMbs:22080},{Level:"5.1", MaxDpbMbs:184320, MaxSecondMbs:983040, MaxFrameMbs:36864}];// 取得命名物件function getRef(id){if (document.getElementById) return document.getElementById(id);// DOMif (document.all) return document.all[id];// IE4if (document.layers) return document.layers[id];// Netscape4return null;}// 取得控制項文本。支援 input。function getCtlText(ctl){if (null==ctl)return;return ctl.value;}function input_onchange(){// invar nwidth = Number(getCtlText(getRef("txtwidth")));var nheight = Number(getCtlText(getRef("txtheight")));var nfps = Number(getCtlText(getRef("txtfps")));var nref = Number(getCtlText(getRef("txtref")));var nlevel = getRef("txtLevel").selectedIndex;// outvar txtolevel = getRef("txtolevel");var txtoframeMbs = getRef("txtoframeMbs");var txtosecondMbs = getRef("txtosecondMbs");var txtoDpbMbs = getRef("txtoDpbMbs");var txtofps = getRef("txtofps");var txtoref = getRef("txtoref");// debug//txtolevel.value = txtolevel.value + ".";//txtolevel.value = nwidth + ", " + nheight + ", " + nfps + ", "+ nref + ", " + nlevel;//txtolevel.value = tblLevels[nlevel % tblLevels.length].Level;// 計算levelvar frameMbs = Math.ceil(nwidth/16) * Math.ceil(nheight/16);// 計算每幀宏塊數var secondMbs = frameMbs * nfps;// 計算每秒宏塊數var DpbMbs = frameMbs * nref;// 計算DPB宏塊數var idx = NaN;// 匹配的層級var bOK = false;// 是否找到匹配的層級。var i;if (!isNaN(frameMbs)){// 尋找第一個匹配的層級for(i=0; i<tblLevels.length; ++i){// 判斷每幀宏塊數bOK = tblLevels[i].MaxFrameMbs >= frameMbs;// 判斷每秒宏塊數if (bOK && !isNaN(nfps) && nfps>0 ){bOK = tblLevels[i].MaxSecondMbs >= secondMbs;}// 判斷DPB宏塊數if (bOK && !isNaN(nref) && nref>0 ){bOK = tblLevels[i].MaxDpbMbs >= DpbMbs;}if (bOK){idx = i;break}}}txtolevel.value = isNaN(idx)?NaN:tblLevels[idx].Level;txtoframeMbs.value = frameMbs;txtosecondMbs.value = secondMbs;txtoDpbMbs.value = DpbMbs;// 根據level約束計算fps/refvar ofps = NaN;// 幀數var oref = NaN;// 參考幀數if (!isNaN(nlevel) && nlevel>=0 && nlevel<tblLevels.length){ofps = tblLevels[nlevel].MaxSecondMbs / frameMbs;oref = Math.min(16, tblLevels[nlevel].MaxDpbMbs / frameMbs);}txtofps.value = ofps;txtoref.value = oref;}function oninit(){// 啟動時計算一次input_onchange();}</script></head><body onload='oninit()'><h1>H.264 Level Calculator（H.264層級計算機）</h1><p><span title='作者'>Author</span>: <a href='http://www.cnblogs.com/zyl910/'>zyl910</a></p><form><table id="tblview" border="1" cellSpacing="1" cellPadding="1"><tr><th></th><th>計算level</th><th>根據level約束計算fps/ref</th></tr><tr><th>in</th><td>width（寬度）:<input id="txtwidth" value='1280' onchange='input_onchange()' /><br />height（高度）:<input id="txtheight" value='720' onchange='input_onchange()' /><br />fps（幀率）:<input id="txtfps" value='24' onchange='input_onchange()' /><br />ref（參考幀數）:<input id="txtref" value='3' onchange='input_onchange()' /><br /></td><td>level（層級）:<select id="txtLevel" onchange='input_onchange()'><option value='1'>1</option><option value='1b'>1b</option><option value='1.1'>1.1</option><option value='1.2'>1.2</option><option value='1.3'>1.3</option><option value='2'>2</option><option value='2.1'>2.1</option><option value='2.2'>2.2</option><option value='3'>3</option><option value='3.1' selected>3.1</option><option value='3.2'>3.2</option><option value='4'>4</option><option value='4.1'>4.1</option><option value='4.2'>4.2</option><option value='5'>5</option><option value='5.1'>5.1</option></select></td></tr><tr><th>out</th><td>level（層級）:<input id="txtolevel" NAME="txtolevel" readonly /><br />frameMbs（每幀宏塊）:<input id="txtoframeMbs" NAME="txtoframeMbs" readonly /><br />secondMbs（每秒宏塊）:<input id="txtosecondMbs" NAME="txtosecondMbs" readonly /><br />DpbMbs（DPB宏塊）:<input id="txtoDpbMbs" NAME="txtoDpbMbs" readonly /><br /></td><td>fps（幀率）:<input id="txtofps" NAME="txtofps" readonly /><br />ref（參考幀數）:<input id="txtoref" NAME="txtoref" readonly /><br /></td></tr></table></form><p>Browser compatible: IE, FireFox, Chrome, Maxthon3...</p><hr /><h3>Appendix A: Level Table</h3><table border="1" cellspacing="1" cellpadding="1" ID="tblref1"><colgroup> <col width="59" /> <col span="2" width="69" /> <col width="71" /> <col span="2" width="68" /> <col width="74" /> <col width="218" /></colgroup><tbody><tr><td rowspan="2" width="59" height="54">Level</td><td colspan="2" width="138">Max macroblocks</td><td colspan="4" width="281">Max video bit rate (kbit/s)</td><td rowspan="2" width="218">Examples for high resolution @ frame rate (max stored frames)</td></tr><tr><td width="69">per second</td><td width="69">per frame</td><td width="71">BP, XP, MP</td><td>HiP</td><td>Hi10P</td><td width="74">Hi422P, Hi444PP</td></tr><tr><td height="36">1</td><td align="right">1,485</td><td align="right">99</td><td align="right">64</td><td align="right">80</td><td align="right">192</td><td align="right">256</td><td width="218">128×96@30.9 (8)<br />176×144@15.0 (4)</td></tr><tr><td height="36">1b</td><td align="right">1,485</td><td align="right">99</td><td align="right">128</td><td align="right">160</td><td align="right">384</td><td align="right">512</td><td width="218">128×96@30.9 (8)<br />176×144@15.0 (4)</td></tr><tr><td height="54">1.1</td><td align="right">3,000</td><td align="right">396</td><td align="right">192</td><td align="right">240</td><td align="right">576</td><td align="right">768</td><td width="218">176×144@30.3 (9)<br />320×240@10.0 (3)<br />352×288@7.5 (2)</td></tr><tr><td height="36">1.2</td><td align="right">6,000</td><td align="right">396</td><td align="right">384</td><td align="right">480</td><td align="right">1,152</td><td align="right">1,536</td><td width="218">320×240@20.0 (7)<br />352×288@15.2 (6)</td></tr><tr><td height="36">1.3</td><td align="right">11,880</td><td align="right">396</td><td align="right">768</td><td align="right">960</td><td align="right">2,304</td><td align="right">3,072</td><td width="218">320×240@36.0 (7)<br />352×288@30.0 (6)</td></tr><tr><td height="36">2</td><td align="right">11,880</td><td align="right">396</td><td align="right">2,000</td><td align="right">2,500</td><td align="right">6,000</td><td align="right">8,000</td><td width="218">320×240@36.0 (7)<br />352×288@30.0 (6)</td></tr><tr><td height="36">2.1</td><td align="right">19,800</td><td align="right">792</td><td align="right">4,000</td><td align="right">5,000</td><td align="right">12,000</td><td align="right">16,000</td><td width="218">352×480@30.0 (7)<br />352×576@25.0 (6)</td></tr><tr><td height="72">2.2</td><td align="right">20,250</td><td align="right">1,620</td><td align="right">4,000</td><td align="right">5,000</td><td align="right">12,000</td><td align="right">16,000</td><td width="218">352×480@30.7(10)<br />352×576@25.6 (7)<br />720×480@15.0 (6)<br />720×576@12.5 (5)</td></tr><tr><td height="72">3</td><td align="right">40,500</td><td align="right">1,620</td><td align="right">10,000</td><td align="right">12,500</td><td align="right">30,000</td><td align="right">40,000</td><td width="218">352×480@61.4 (12)<br />352×576@51.1 (10)<br />720×480@30.0 (6)<br />720×576@25.0 (5)</td></tr><tr><td height="54">3.1</td><td align="right">108,000</td><td align="right">3,600</td><td align="right">14,000</td><td align="right">17,500</td><td align="right">42,000</td><td align="right">56,000</td><td width="218">720×480@80.0 (13)<br />720×576@66.7 (11)<br />1280×720@30.0 (5)</td></tr><tr><td height="36">3.2</td><td align="right">216,000</td><td align="right">5,120</td><td align="right">20,000</td><td align="right">25,000</td><td align="right">60,000</td><td align="right">80,000</td><td width="218">1,280×720@60.0 (5)<br />1,280×1,024@42.2 (4)</td></tr><tr><td height="54">4</td><td align="right">245,760</td><td align="right">8,192</td><td align="right">20,000</td><td align="right">25,000</td><td align="right">60,000</td><td align="right">80,000</td><td width="218">1,280×720@68.3 (9)<br />1,920×1,080@30.1 (4)<br />2,048×1,024@30.0 (4)</td></tr><tr><td height="54">4.1</td><td align="right">245,760</td><td align="right">8,192</td><td align="right">50,000</td><td align="right">62,500</td><td align="right">150,000</td><td align="right">200,000</td><td width="218">1,280×720@68.3 (9)<br />1,920×1,080@30.1 (4)<br />2,048×1,024@30.0 (4)</td></tr><tr><td height="36">4.2</td><td align="right">522,240</td><td align="right">8,704</td><td align="right">50,000</td><td align="right">62,500</td><td align="right">150,000</td><td align="right">200,000</td><td width="218">1,920×1,080@64.0 (4)<br />2,048×1,080@60.0 (4)</td></tr><tr><td height="90">5</td><td align="right">589,824</td><td align="right">22,080</td><td align="right">135,000</td><td align="right">168,750</td><td align="right">405,000</td><td align="right">540,000</td><td width="218">1,920×1,080@72.3 (13)<br />2,048×1,024@72.0 (13)<br />2,048×1,080@67.8 (12)<br />2,560×1,920@30.7 (5)<br />3,680×1,536@26.7 (5)</td></tr><tr><td height="54">5.1</td><td align="right">983,040</td><td align="right">36,864</td><td align="right">240,000</td><td align="right">300,000</td><td align="right">720,000</td><td align="right">960,000</td><td width="218">1,920×1,080@120.5 (16)<br />4,096×2,048@30.0 (5)<br />4,096×2,304@26.7 (5)</td></tr></tbody></table><h3>Appendix B: MaxDpbMbs Table</h3><table border="1" cellspacing="1" cellpadding="1" ID="Table1"><colgroup> <col width="59" /> <col width="96" /></colgroup><tbody><tr><td width="59" height="18">Level</td><td width="96">MaxDpbMbs</td></tr><tr><td height="18">1</td><td align="right">396</td></tr><tr><td height="18">1b</td><td align="right">396</td></tr><tr><td height="18">1.1</td><td align="right">900</td></tr><tr><td height="18">1.2</td><td align="right">2,376</td></tr><tr><td height="18">1.3</td><td align="right">2,376</td></tr><tr><td height="18">2</td><td align="right">2,376</td></tr><tr><td height="18">2.1</td><td align="right">4,752</td></tr><tr><td height="18">2.2</td><td align="right">8,100</td></tr><tr><td height="18">3</td><td align="right">8,100</td></tr><tr><td height="18">3.1</td><td align="right">18,000</td></tr><tr><td height="18">3.2</td><td align="right">20,480</td></tr><tr><td height="18">4</td><td align="right">32,768</td></tr><tr><td height="18">4.1</td><td align="right">32,768</td></tr><tr><td height="18">4.2</td><td align="right">34,816</td></tr><tr><td height="18">5</td><td align="right">110,400</td></tr><tr><td height="18">5.1</td><td align="right">184,320</td></tr></tbody></table></body></html>

——

http://files.cnblogs.com/zyl910/h264_level_calculator.rar

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More