视频上传 限制大小 时间 结合layui +php
var videoflag = false;
var objurl;
layui.use(‘upload’, function(){
var $ = layui.jquery,upload = layui.upload;
var loading;
upload.render({
elem: ‘#videofile’
,url: “{php echo mobileUrl(‘farm’, array(‘controller’ => ‘farm.uploadNull’));}” //改成您自己的上传接口
,accept: ‘video’ //视频
,size: 51200 //限制文件大小，单位 KB
,choose: function(obj){
// layer.load(2);
obj.preview(function(index, file, result){
var url = URL.createObjectURL(file);//把file转成URL
objurl = url;
$(‘#videoattr’).attr(‘src’, url); //视频链接
var timer = setTimeout(function(){
var video_time = document.getElementById(“videoattr”).duration;//视频时长
console.log(video_time);
if(video_time>15){
videoflag = true;
layer.msg(‘上传视频不能超过15秒’, {icon: 2})
}
clearTimeout(timer);
},1000);
//开始上传
if(videoflag==false){
var targetFile = file;
console.log(targetFile)
var cp_timestamp=new Date().getTime()+getRandom(1,10000);
var tmp = targetFile.name.split(“.”);
var fragname = “video-“+cp_timestamp;
var filename = fragname + ‘.’ + tmp[tmp.length-1] ;
var fileSize = targetFile.size;
var pieceSize = 5 * 1024 * 1024;
var total = Math.ceil( fileSize / pieceSize );
var i = 0;
var start = end = 0;
while(i < total){
end = start + pieceSize;
if(end >= fileSize){
end = fileSize;
}
console.log( ‘文件的index:’ + index+ ‘| 处理文件切片 i:’+i , ‘start:’ + start, ‘end:’ + end );
var frag = targetFile.slice(start, end);
var formData = new FormData();
formData.append(“filename”,filename);
formData.append(“fragname”,fragname);
formData.append(“file”,frag);
formData.append(“fragindex”,i+1);
formData.append(“total”,total);
$.ajax({
// async: false,
type: “POST”,
url: “{php echo mobileUrl(‘farm’, array(‘controller’ => ‘farm.uploadVideo’));}”,
data: formData,
processData: false,//重要
contentType: false,//重要
cache:false,
dataType: “json”, //表示返回值类型，不必须
success: function (res) {
console.log(‘res:’ + index);
console.log(res);
if(total==parseInt(res.num)){
console.log(res.error);
//返回地址成功
if(res.error==0){
$(‘#imgarea’).html(‘<div class=”poster_img”></div><video autoplay=”autoplay” class=”video-area” poster=”{php echo WY_LOCAL_MObILE}img/bgtree.jpg” playsinline=”” controls=”controls” id=”video” style=”width: 100%;height: auto;” ><source id=”video-source” src=”‘+objurl+'”></video>’);
$(“.divX”).show();
$(“#videourl”).val(res.videopath);
var u = navigator.userAgent;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isiOS == true) {
//$(“#videofile”).hide();
//$(“.poster_img”).css(“background-image”,”url({php echo WY_LOCAL_MObILE}img/fengmian.jpg)”);
let videoplay = document.getElementById(“video”);
//$(“#video”).attr(“poster”,”{php echo WY_LOCAL_MObILE}img/fengmian.jpg”)
if (videoplay) {
//点击图片的时候暂停，并且使图片隐藏，再次点击视频或者图片的时候播放
videoplay.onclick = function() {
if (videoplay.paused) {
videoplay.play();
} else {
videoplay.pause();
}
};
}
// $(“#video”).click(function(){
// $(“.poster_img”).hide();
// //$(“#videofile”).show()
// $(this).attr(“controls”,”controls”)
// document.getElementById(‘video’).play();
// })
}else{
$(‘#video’).attr(“controls”,”controls”)
}
//
//
var timesRun = 0;
var timer = setInterval(function () { // 定时器获取时长，，，，定时器只一次
timesRun += 1;
if (timesRun === 1) {
clearInterval(timer); // 关闭定时器
}
// 视频缩略图-先获取video对象-用canvas画图，返回imageSrc，返回的是base64编码-然后解码，生成二进制blob文件，提交二进制文件到后台。如果这里不使用定时器，也获取不到图片。
var videoElement = document.getElementById(‘video’);
videoElement.play();
var canvas = document.createElement(“canvas”);
canvas.width = videoElement.videoWidth*0.25;
canvas.height = videoElement.videoHeight*0.25;
//console.log(videoElement.videoWidth)
canvas.getContext(‘2d’).drawImage(videoElement, 0, 0, canvas.width, canvas.height);
var img = document.createElement(“img”);
img.src = canvas.toDataURL(“image/png”);
if (!isiOS) {
//用于区分安卓和ios 日记树中的视频封面
$(“#output”).html(img);
}
}, 1000);
}else{
layer.msg(‘视频上传失败’, {icon: 2})
}
}
}
})
// if(end >= fileSize){
// break;
// }
start = end;
i++;
}
}
});
}
,before: function(obj){
loading = layer.msg(‘正在上传..’, {icon: 16, shade: 0.3, time:0});
}
,done: function(res){
console.log(res)
if(videoflag==false){
// layer.msg(‘上传成功’);
// $(‘#imgarea’).html(‘<video autoplay=”autoplay” class=”video-area” playsinline=”” controls=”controls” muted id=”video” style=”width: 100%;height: auto;” ><source id=”video-source” src=”‘+res.videopath+'”></video>’);
// $(“.divX”).show();
}
layer.close(loading);
}
});
});
后端使用php 使用微擎框架，代码贴出来留当笔记
//上传视频
public function uploadVideo(){
global $_GPC, $_W;
// echo “<pre>”;
// print_r($_FILES);
// echo “<pre>”;
// print_r($_GPC); die;
$fragindex = $_GPC[‘fragindex’];
$fragname = $_GPC[‘fragname’];
$total = $_GPC[‘total’];
$filename = $_GPC[‘filename’];
$file = isset($_FILES[‘file’]) ? $_FILES[‘file’]:null; //分段的文件
if($file[‘size’]>0){
$content = file_get_contents($file[‘tmp_name’]);
$path = “videos/”.$_W[‘uniacid’].”/” . date(‘Y/m/’).$fragname.”/”;
$realpath = “videos/”.$_W[‘uniacid’].”/” . date(‘Y/m/’);
$videopath = $path.$filename;
$pathname = ATTACHMENT_ROOT . $videopath;
load()->func(‘file’);
mkdirs(ATTACHMENT_ROOT .$path);
$res = file_put_contents($pathname.’-‘.$fragindex, $content);
if ($res){
$num = $this->getFileNumber(ATTACHMENT_ROOT.$path);
if($num == $total){
//合并文件
$i = 1;
while($i<=$total){
$con = file_get_contents($pathname.’-‘.$i);
file_put_contents(ATTACHMENT_ROOT.$realpath.$filename, $con,FILE_APPEND);
$i++;
}
$videopath = $realpath.$filename;
file_remote_upload($videopath,true);//远端上传
$videopath = tomedia($videopath);
//删除本地分片文件
$this->deldir(ATTACHMENT_ROOT .$path);
echo json_encode(array(‘error’=>0,’message’=>’上传成功’,’videopath’=>$videopath,’num’=>$num));exit;
}
echo json_encode(array(‘error’=>0,’message’=>’上传第’.$fragindex.’个成功’));exit;
}
}
echo json_encode(array(‘error’=>0,’message’=>’上传失败’));exit;
}
/**
* 获取文件夹下文件的数量
* @param $url 传入一个url如：/apps/web
* @return int 返回文件数量
*/
public function getFileNumber($url){
$num=0;
$arr = glob($url);
foreach ($arr as $v) {
if(is_file($v)) {
$num++;
}
else {
$num+=$this->getFileNumber($v.”/*”);
}
}
return $num;
}
//删除文件夹及以下所有文件 $path = “./Application/Runtime”;
public function deldir($dir) {
//先删除目录下的文件：
$dh=opendir($dir);
while ($file=readdir($dh)) {
if($file!=”.” && $file!=”..”) {
$fullpath=$dir.”/”.$file;
if(!is_dir($fullpath)) {
unlink($fullpath);
} else {
deldir($fullpath);
}
}
}
closedir($dh);
//删除当前文件夹：
if(rmdir($dir)) {
return true;
} else {
return false;
}
}
版权所有丨如未注明 , 均为原创 , 转载请注明H5 手机端视频分片上传 并截图当做视频封面，安卓手机可以自动播放，ios没有找到自动播放的方法！
