{extend name="public/layout" /}
{block name="head"}
<script src="//cdn-go.cn/cdn/vod-js-sdk-v6/latest/vod-js-sdk-v6.js"></script>
{/block}
{block name="body"}
<body>
<div class="p-15">
<div class="upload-video">
<input type="file" style="display:none;" id="vod-file" multiple
accept=".mp4,.ts,.flv,.wmv,.asf,.rm,.rmvb,.mpg,.mpeg,.3gp,.mov,.webm,.mkv,.avi,.mp3,.m4a,.flac,.ogg,.wav" />
<button type="button" class="btn btn-default" onclick="$(\'#vod-file\').click();"><i class="mdi mdi-select"></i> 选择视频</button>
<button type="button" class="btn btn-primary" onclick="uploadVod()"><i class="mdi mdi-video"></i> 上传视频</button>
<div id="video-box">
</div>
</div>
</div>
<script type="text/html" id="video-box-tpl">
<ul>
{@each videoFiles as video, index}
<li data-name="${video.sessionName}">
${video.name}
<div class="clearfix"></div>
<div class="progress-bar" aria-valuemin="0" aria-valuemax="100">
0%
</div>
</li>
{@/each}
</ul>
</script>
<script>
function getSignature() {
return $.get(\'sign.html\',function (sign) {
return sign;
});
}
var tcVod = new TcVod.default({
getSignature: getSignature // 前文中所述的获取上传签名的函数
});
var videoNames = []; //已选择的视频文件数组
var videoFiles = []; //上传视频文件
var uploader = []; //上传对象
//选择视频
$(\'#vod-file\').change(function (e) {
var files = e.target.files || e.dataTransfer.files;
if(files.length==0) alert("请选择视频文件");
for (var i=0; i<files.length; i++) {
if (files[i].constructor == File) {
var file = files[i];
var sessionName = file.name+\'_\'+file.size;
if($.inArray(sessionName, videoNames) == -1){
videoNames.push(sessionName);
file.sessionName = sessionName;
videoFiles.push(file);
}
}
}
var html = juicer($(\'#video-box-tpl\').html(),{videoFiles:videoFiles});
$(\'#video-box\').html(html);
});
//上传视频
function uploadVod() {
if(videoFiles.length==0) alert(\'请选择视频文件\');
for(var i=0; i<videoFiles.length; i++){
let sessionName = videoFiles[i].sessionName;
let liObj = $(\'#video-box\').find(\'[data-name="\'+sessionName+\'"]\');
uploader[i] = tcVod.upload({
mediaFile: videoFiles[i],
});
uploader[i].on(\'media_progress\', function (info) {
console.info(info.percent);
var width = (info.percent*100).toFixed(0);
liObj.find(\'.progress-bar\').attr(\'aria-valuenow\',width).css(\'width\',width+\'%\').text(width+\'%\');
});
uploader[i].on(\'media_upload\', function (info) {
console.info(info);
});
}
}
</script>
</body>
{/block}