{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}
原文地址:https://www.cnblogs.com/homexigua/p/12388826.html
时间: 2024-10-16 19:16:35