視訊流分片後的ts片,H265壓縮(二)例項
阿新 • • 發佈:2019-02-05
這樣理由上一篇已經寫了,這篇主要是將想法實踐。
將視訊分割成ts分片,對ts分片進行壓縮。效果圖如下:
html程式碼:
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> <style> body, h1, h2, p {margin:0; padding:0;} html {font-family:"微軟雅黑";} h1 {font-size:24px; font-weight:normal; padding:20px 0; text-align:center; color:#858585; background:-webkit-linear-gradient(rgba(0, 186, 255, .8), rgba(0, 130, 255, .8)); border-bottom:1px solid #009cff; color:#FFF; margin-bottom:50px;} video {display:block; margin:0 auto 30px auto;} canvas {display:none;} button {display:block; width:100%; height:50px; font-size:24px; margin:0 auto; border:1px solid #0085ff; color:#FFF; background:-webkit-linear-gradient(rgba(80, 170, 255, .8), rgba(0, 132, 255, .8)); cursor:pointer; border-radius:5px; margin-bottom:30px;} button:hover {background:-webkit-linear-gradient(rgba(0, 132, 255, .8), rgba(80, 170, 255, .8)); border-color:#1988ff;} h2, p {width:100%; margin:0 auto; color:#858585;} h2 {margin-bottom:1em; font-size:18px;} p {font-size:14px; line-height:24px;} #output{text-align: center;} #tabbody-div{border: none;} .videotl{height: 40px; line-height: 40px; font-size: 18px; border-bottom: 1px solid #f1f1f1; padding-left: 10px; margin-bottom: 20px;} #stop{ width: 200px;border: 1px solid #0085ff; color: #FFF; background: rgba(0, 132, 255, .8);} #tabbody-div{width: 100%; height: 340px;} .videofoot{width: 100%; height: 40px; line-height: 40px; border-top:1px solid #f1f1f1;} .tab-div{height: 500px; overflow: hidden;} body{padding: 0px; margin:0px;} .videofoot input{float: right; height: 30px; line-height: 30px; margin: 5px 10px;background: rgba(0, 132, 255, .8); border: none; color: #ffffff;} .videonav{width:90%; text-align: center; height: 40px; line-height: 40px; list-style: none;} .videonav li{width: 50%; float: left; color: #cccccc; border-bottom: 2px solid #f1f1f1;} .videonav li.sel{border-bottom: 2px solid #0085ff; color:#0085ff;} .videonav li.jiantou{width: 10%; font-size: 24px; font-family: "Microsoft YaHei", '微軟雅黑';} .tab-div{ width: 100%; height:100%; position: fixed; z-index: 3000; left: 0px; top:0px; background:rgba(0,0,0,0.5);} .tab-div form{width: 800px; height: 500px; margin: 0px auto; margin-top: 5%; border:1px solid #cccccc; background: #ffffff;/*box-shadow: 0px 1px 10px #2fa8ff; border-radius:1%; */} .videonav li a{display: block; width: 100%; height: 100%; color: #cccccc; text-decoration: none;} #vtime{border: none; width: 80px; color: #00a0e9;} #yasuo{border: 2px dashed #F1F1F1; height: 200px; overflow-y: auto;} #yasuo li{list-style: none; font-size: 12px;} #yasuo li.blue{color: #00a0e9;} progress{width: 90%;} </style> <!-- start goods form --> <div class="tab-div"> <form enctype="multipart/form-data" action="" method="post" name="theForm"> <div class="videotl">編輯課程</div> <ul class="videonav"><li ><a href="video.php?act=edit&goods_id=1101&videoid=5">❶視訊上傳</a></li><li class="sel">❷視訊壓縮</li></ul> <!-- tab body --> <div id="tabbody-div"> <!-- 最大檔案限制 --> <input type="hidden" name="MAX_FILE_SIZE" value="2097152" /> <!-- 通用資訊 --> <table width="100%" id="video-table" align="center"> <tr> <td width="100%"> <div><progress value="0" max="100" id="prouploadfile"></progress> <span id="persent">0%</span></div> <ul id="yasuo"> </ul> <button class="screen" type="button" onclick="cutdown();">壓縮視訊</button> </td> </tr> </table> <div class="button-div"> <input type="hidden" name="goods_id" value="1101" /> <input type="hidden" id="videourl" name="videourl" value="/uploadsvideo/video/201806141528942831/index.m3u8" /> <input type="hidden" name="videoid" value="5" /> <input type="hidden" id="video_img" name="video_img" value="" /> <!--修改程式碼_start By www.oeob.net 主要是給這兩個INPUT各自增加了一個ID, id="goods_info_submit" id="goods_info_reset" --> <!--修改程式碼_end By www.oeob.net--> </div> <input type="hidden" name="act" value="videoupdate" /> </div> <div class="videofoot"><input id="goods_info_submit" type="submit" value="完成" class="button" /></div> </form> </div> <script> var pro = document.getElementById('prouploadfile'); var persent = document.getElementById('persent'); var ii=0; function cutdown(){ pro.value=0; persent.innerHTML="0%"; cutdown_sub(); } var i=0; function cutdown_sub(){ var myflie=new Array(); myflie[0]="video-000.ts"; myflie[1]="video-001.ts"; myflie[2]="video-002.ts"; myflie[3]="video-003.ts"; myflie[4]="video-004.ts"; myflie[5]="video-005.ts"; myflie[6]="video-006.ts"; myflie[7]="video-007.ts"; myflie[8]="video-008.ts"; myflie[9]="video-009.ts"; myflie[10]="video-010.ts"; myflie[11]="video-011.ts"; myflie[12]="video-012.ts"; myflie[13]="video-013.ts"; myflie[14]="video-014.ts"; myflie[15]="video-015.ts"; myflie[16]="video-016.ts"; myflie[17]="video-017.ts"; myflie[18]="video-018.ts"; myflie[19]="video-019.ts"; myflie[20]="video-020.ts"; myflie[21]="video-021.ts"; myflie[22]="video-022.ts"; myflie[23]="video-023.ts"; myflie[24]="video-024.ts"; myflie[25]="video-025.ts"; myflie[26]="video-026.ts"; myflie[27]="video-027.ts"; myflie[28]="video-028.ts"; myflie[29]="video-029.ts"; myflie[30]="video-030.ts"; myflie[31]="video-031.ts"; myflie[32]="video-032.ts"; myflie[33]="video-033.ts"; myflie[34]="video-034.ts"; myflie[35]="video-035.ts"; myflie[36]="video-036.ts"; myflie[37]="video-037.ts"; myflie[38]="video-038.ts"; myflie[39]="video-039.ts"; myflie[40]="video-040.ts"; myflie[41]="video-041.ts"; myflie[42]="video-042.ts"; myflie[43]="video-043.ts"; myflie[44]="video-044.ts"; var xhr = new XMLHttpRequest();//第一步 //console.log(xhr); //新建一個FormData物件 var formData = new FormData(); //++++++++++ //formData.append('videoid', videoid.value); formData.append('myflie', myflie[i]); formData.append('mypath', "/uploadsvideo/video/201806141528942831/"); //return false; //pro.value=i+1; p=parseInt(i+1)*100/Math.ceil(myflie.length) pro.value=p; persent.innerHTML=parseInt(p)+"%"; if(i==(myflie.length-1)){ formData.append('lastone', i); } formData.append('blobname', i); var html='<li class="blue">壓縮視訊流檔案'+myflie[i]+'……</li>'; $("#yasuo").append(html); xhr.open('POST', 'video.php?act=cutdown'); //第二步驟 //傳送請求 xhr.send(formData); //第三步驟 //ajax返回 xhr.onreadystatechange = function() { //第四步 if ( xhr.readyState == 4 && xhr.status == 200 ) { if(i<myflie.length){ var img='<img src="images/yes.gif">'; $("#yasuo .blue").append(img); $("#yasuo li").removeClass("blue"); cutdown_sub(); }else{ var img='<img src="images/yes.gif">'; $("#yasuo .blue").append(img); $("#yasuo li").removeClass("blue"); //alert(xhr.responseText+"上傳完成!"); alert("上傳完成!"); } } } i=i+1; } </script>
$ffmpeg="D:/php/ffmpeg/bin/ffmpeg.exe "; if($_REQUEST['act'] == 'cutdown'){ $basedir=".."; $myflie=isset($_REQUEST['myflie'])?$_REQUEST['myflie']:""; $mypath=isset($_REQUEST['mypath'])?$_REQUEST['mypath']:""; $ary=explode("/",$mypath); unset($ary[count($ary)-1]); $path=implode("/",$ary); $topath=$basedir.$path."-yasuo"."/"; @mkdir($topath,0777,true); $from=$basedir.$mypath; $to=$topath.$myflie; //$from=$basedir.$mypath."yasuo-".$myflie; $cmd = $ffmpeg.' -i '.$from.$myflie.' -c:v libx264 -c:a aac -copyts -strict -2 -y '.$to ; system($cmd,$state); if($state==0){ /*$cmd=$ffprobe.' -print_format json -show_format -i "%s" '; ob_start(); $flie=$from; passthru(sprintf($cmd,$flie)); $info = ob_get_contents(); ob_end_clean(); $infoary=json_decode($info,true); $duration=$infoary['format']['duration']; $myfilem3u8 = fopen($frompath."index.m3u8", "abw") or die("Unable to open file!"); $txt="#EXTINF:".round($duration).",\n"; fwrite($myfilem3u8, $txt); $txt = $myflie."\n"; fwrite($myfilem3u8, $txt); fclose($myfilem3u8);*/ @unlink($from.$myflie); /*@unlink($basedir.$mypath.$myflie); $cmd = $ffmpeg.' -i '.$from.' -'.$basedir.$mypath.$myflie ; system($cmd,$state); if($state==0){ @unlink($basedir.$mypath.$myflie); }*/ echo 1;//exit(); } if(isset($_POST['lastone'])){ $m3u8="index.m3u8"; if(@copy($form.$m3u8,$topath.$m3u8)){ @unlink($form.$m3u8); } @rmdir($form); rename($topath,$form); } }