目录：
1、apicloud新手总结
2、apicloud同原生app与h5的数据交互
3、apicloud七牛云视频上传并截取第一帧js实现
功能：视频上传七牛云并截取第一帧保存为封面图
具体逻辑与运行视频，源代码请访问：https://community.apicloud.com/bbs/thread-141103-1-1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>提交编辑</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<link rel="stylesheet" type="text/css" href="../css/aui.css" />
<style type="text/css">
.input_file {
width: 7.125rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
opacity: 0;
}
</style>
</head>
<body>
<div id="tj" v-cloak>
<!-- 上传视频 -->
<div class="tj_uploads">
<span class="tj_upload_xian">上传视频</span>
<!-- 预留。显示上传进度 -->
<div class="tj_jindu">
<div id="video" class="w50">
</div>
<div v-for="(item,index) in videoInfo" class="tj_everyone" :class="'tj'+index">
<img :src="item.videoImg" alt="" style="width: 1.7rem;height: 1.7rem;margin-right: 0.75rem;border-radius: 0.15rem;">
<div class="prent_div">
<div class="tj_jindu_left">
<input type="hidden" name="" id="videoHide" :value="item.video" />
<span :class="item.class">{{item.jindu}}</span>
<span class="tj_jiindu_size">{{item.size}}</span>
</div>
<img tapmode @click="delVideo(index)" class="tj_jindu_right" src="../image/toke/btn_sc_.png" v-if="item.isdel" alt="">
<span class="prent" :class="'prent'+index"></span>
</div>
</div>
</div>
<!-- 添加视频按钮 -->
<div class="tj_addVideo">
<input type="file" @change="upload_image(this)" class="input_file" webkitdirectory accept="video/*">
<img src="../image/toke/img_tjsp.png" alt="" id="pickfiles">
</div>
</div>
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script src="../script/vue.js" type="text/javascript" charset="utf-8"></script>
/*不记得这两个js文件到底有没有用了，可以去七牛云官方文档上看一下*/
<script src="https://cdn.staticfile.org/plupload/2.1.9/moxie.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.staticfile.org/plupload/2.1.9/plupload.full.min.js"></script>
<script src="../script/qiniu.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#tj",
data:{
videoInfo: [], //提交视频全部数据
uploader: '',
percent: '', //上传进度
lastimg: '',
},
methods:{
// 点击添加视频
upload_image:function() {
var input_file = $api.dom(".input_file");
var fileName = $api.val(input_file);
var files = input_file.files;
var file = input_file.files[0]; //获取整个上传文件
// alert(file.name);
var video = $api.dom("#video .video");
var videoURL = null,
windowURL = window.URL || window.webkitURL;
if (files && files[0]) {
videoURL = windowURL.createObjectURL(files[0]);
// alert(videoURL);
// 没有自动播放时截取的图片为黑色空白
$api.html($api.dom("#video"), '<video src="' + videoURL + '" controls="controls" autoplay = "autoplay" muted="true"></video>');
$api.css($api.dom("#video"), 'display:none;');
setTimeout(function() {
createIMG(file.name);
}, 500);
}
//因为上传多个所以才这样写
var fen = {
"name":file.name,
"size": conver(file.size),
"type": file.type,
"lastModified": file.lastModified,
"jindu": "上传中",
"video": "",
"class": "",
"isdel": false,
"videoImg": "../image/toke/img_scz_46.png",
};
vm.videoInfo.push(fen);
var name=new Date().getTime(); //以时间戳进行视频的命名,防止重复
var suffix = fileName.substring(fileName.lastIndexOf("."), fileName.length); //后缀名:eg:.png
var domain = ""; //注册的七牛云域名
var lastVideo={};
if(vm.videoInfo.length>0) {
lastVideo = vm.videoInfo[vm.videoInfo.length-1];
var lee = vm.videoInfo.length-1; //数组的最后一个
}
//上传处理最关键的部分，根据自己需要设置
var observer = {
/* 逻辑：
点击上传视频：默认每次只能上传一个，这个传完以后才能传下一个
1、上传中：获取数组最后一个数据，显示上传中，进度条变化
*/
next(response) {
// 待优化:目前设置为只能一个个单个上传
$api.attr($api.dom(".input_file"),"type","button");
lastVideo["jindu"] = "上传中";
lastVideo["videoImg"] = "../image/toke/img_scz_90.png";
lastVideo["class"] = "tj_jindu_loading";
$api.css($api.dom(".prent"+lee),"width:"+Math.floor(response.total.percent)+"%");
},
error(err) {
lastVideo["jindu"] = "上传失败，请删除后重新添加视频。";
lastVideo["size"] = "";
lastVideo["isdel"] = true;
lastVideo["class"] = "tj_jindu_fail";
lastVideo["videoImg"] = "../image/toke/img_scz_90.png";
$api.css($api.dom(".prent"+lee),"display:none;");
},
complete(res1) {
$api.attr($api.dom(".input_file"),"type","file");
lastVideo["jindu"] = "已完成";
lastVideo["video"] = "/"+res1.key;
lastVideo["class"] = "tj_jindu_wancheng";
lastVideo["videoImg"] = vm.lastimg;
$api.css($api.dom(".prent"+lee),"display:none;");
}
};
var key = "whc"+name+suffix; //上传文件名
// alert(key);
var putExtra = {
fname: "",
params: {},
mimeType: ["video/mp4"]
};
var config = {};
var observable = qiniu.upload(file, key, token, putExtra, config)
observable.subscribe(observer) // 上传开始
},
// 失败后移除此元素
delVideo:function(index) {
vm.videoInfo[index]["video"] = '';
vm.videoInfo[index]["videoImg"] = '';
$api.remove($api.dom(".tj"+index));
if(index == 0) {
vm.cover = '';
}
},
},
})
apiready = function() {
};
</script>
</html>
// 截取视频第一帧为图片
function createIMG(name) {
var scale = 0.25,
video = $api.dom("#video video"),
canvas = document.createElement("canvas"),
canvasFill = canvas.getContext('2d');
canvas.width = video.videoWidth * scale;
canvas.height = video.videoHeight * scale;
canvasFill.drawImage(video, 0, 0, canvas.width, canvas.height);
var src = canvas.toDataURL("image/jpeg");
api.ajax({
url : "", //图片上传地址，此处传递的为base64图片
method : 'post',
// dataType : 'json',
data : {
values: {
image: src
}
}
},function(res) {
if(res.code) {
vm.lastimg = res.info.file_url; //用作最后一个封面图
}
});
}
网友评论