비메오 API로 브라우저에서 영상업로드 하는 것 관련해서 영상시간을 추출해내는 방법 아시는 분 계신가요??

Question

현재 브라우저에서 영상을 선택하고 비메오로 업로드 하는 기능을 작성중입니다.

jsp는 이렇게 작성했습니다. generateVideo: function(data, video, title) { const $this = this; // vimeo 업로드 옵션 const options = { name: video.name, upload: { approach: 'tus', size: video.size } // privacy: { // view: 'unlisted', // embed: 'whitelist' // } }; Axios({ method: 'post', url: 'https://api.vimeo.com/me/videos', headers: { 'Content-Type': 'application/json; charset=utf8', Authorization: 'bearer eddf96a95af14029ea24ea7be962684d', Accept: 'application/vnd.vimeo.*+json;version=3.4' }, data: JSON.stringify(options) }) .then((res) => { const embedHtml = res.data.embed.html; let url = embedHtml.split(' ')[1]; url = url .substring(0, url.indexOf('?')) .split('=')[1] .replace('"', ''); let videoId = res.data.uri; videoId = videoId.substr(videoId.lastIndexOf('/') + 1); const uploadLink = res.data.upload.upload_link; $this.uploadVideo(video, title, videoId, uploadLink, url); }) .catch((err) => { console.error(err); }); }, uploadVideo: function(video, title, videoId, uploadLink, url) { const $this = this; Axios({ method: 'patch', url: uploadLink, headers: { 'Tus-Resumable': '1.0.0', 'Upload-Offset': 0, 'Content-Type': 'application/offset+octet-stream', Accept: 'application/vnd.vimeo.*+json;version=3.4' }, data: video }) .then((res) => { console.log(res); $this.checkTranscoding(videoId, url); }) .catch((err) => { console.error(err); }); $this.generateProgressBar(videoId, title, uploadLink); }, generateProgressBar: function(videoId, title, uploadLink) { const $this = this; let length = 0; let offset = 0; const target = $('#upload-list'); const alert = `

Uploading - ${title}

`; target.append(alert); const calculateProcess = function($url) { $this .getProcess($url) .then((res) => { length = res.headers['upload-length']; offset = res.headers['upload-offset']; const process = ((offset / length) * 100).toFixed(2); if (process >= 100) return; setTimeout(() => { calculateProcess($url); }, 1000); console.log(process); }) .catch((err) => { console.error(err); }); }; calculateProcess(uploadLink); }, checkTranscoding: function(videoId, url) { const $this = this; const target = $('#upload-list'); const html = target .find(`.alert[data-id = ${videoId}]`) .html() .trim() .replace('Uploading', 'Transcoding'); target.find(`.alert[data-id = ${videoId}]`).html(html); const state = function($videoId) { Axios({ method: 'get', url: `https://api.vimeo.com/videos/${$videoId}`, headers: { Accept: 'application/vnd.vimeo.*+json;version=3.4', Authorization: 'bearer eddf96a95af14029ea24ea7be962684d' } }).then((res) => { const { status } = res.data.transcode; if (status !== 'complete') { setTimeout(() => { state($videoId); }, 1000); } else { const alert = target.find(`.alert[data-id = ${$videoId}]`); const buttonWrapper = document.createElement('div'); buttonWrapper.setAttribute('class', 'btn-wrapper'); const button = ` URL 복사 코드가 복사되었습니다. `; alert.removeClass('alert-light'); alert.addClass('alert-success'); const text = alert .text() .trim() .replace('Transcoding', '업로드가 완료되었습니다!'); alert.text(text); alert.append(buttonWrapper); buttonWrapper.innerHTML = button; const btnUrlCopy = $(`.btn-url-copy`); btnUrlCopy.off('click'); btnUrlCopy.on('click', function() { const $$this = $(this); const code = $$this.data('url'); const input = document.createElement('input'); const copyText = $$this.next('.copy-text'); input.setAttribute('value', code); $('body').append(input); input.select(); document.execCommand('copy'); copyText.addClass('on'); input.remove(); setTimeout(() => { copyText.removeClass('on'); }, 2000); }); } }); }; state(videoId); }, getProcess: function(url) { return Axios({ method: 'head', url: url, headers: { 'Tus-Resumable': '1.0.0', Accept: 'application/vnd.vimeo.*+json;version=3.4' } }); },js 입니다. 영상을 비메오에 업로드 하는 것 까지는 작성이 되었습니다.근데 이렇게 하고나니 영상의 플레이타임, 그러니까 XX분 XX초 영상이라는 것을 알 수 없는 점이 확인되었습니다.이 XX분XX초 라는 정보를 가져올 수 있어야하는데, 이것을 어떻게해야 가져올 수 있을까요? 만약 가져올 수 없다면 그냥 영상 업로드를 하는 페이지에 영상시간을 입력하도록 기능을 수정하려고 하고있습니다.

비메오 API로 브라우저에서 영상업로드 하는 것 관련해서 영상시간을 추출해내는 방법 아시는 분 계신가요??

0개의 답변

#vimeo 목록