视频流分片后的ts片，H265压缩（二）实例
程序员文章站
2022-07-07 11:51:30
...
这样理由上一篇已经写了，这篇主要是将想法实践。
将视频分割成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);
}
}