{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 // acquired earlier in the upload function signature }); var videoNames = []; // array of the selected video file var videoFiles = []; // to upload the video file var uploader = []; // upload objects // Select Video $('#vod-file').change(function (e) { var files = e.target.files || e.dataTransfer.files; if (files.length == 0) alert ( "Please select a video file"); 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); }); // Upload video function uploadVod() { if (videoFiles.length == 0) alert ( 'Please select a video file'); 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}