Zencoder 진행 JSON 응답이 boostrap 진행률 막대에서 채우기 너비로 채우기 변환

Question

zencoder 진행률 JSON 응답을받는 방법에 대한 정보를 필자가 찾고 응답의 "진행률"변수를 javascript 변수로 변환하여이를 채우는 데 사용했습니다. CSS 너비 값의 숫자.

Zencoder JSON 응답에

더 많은 정보는 여기에서 찾을 수 있습니다 : 다음과 같이 https://app.zencoder.com/docs/api/jobs/progress

전형적인 출력은 다음과 같습니다

{ 
    "state": "processing", 
    "progress": 32.34567345, 
    "input": { 
    "id": 1234, 
    "state": "finished" 
    }, 
    "outputs": [ 
    { 
     "id": 4567, 
     "state": "processing", 
     "current_event": "Transcoding", 
     "current_event_progress": 25.0323, 
     "progress": 35.23532 
    }, 
    { 
     "id": 4568, 
    "state": "processing", 
     "current_event": "Uploading", 
     "current_event_progress": 82.32, 
     "progress": 95.3223 
    } 
    ] 
} 

내가 업데이트 "진행"값을 얻으려면 매 30 번째 또는 그래서 그것을 사용하여 Twitter에서 폭 값을 채우기 Boostraps 진행률 표시 줄 :

<div class="progress progress-striped active"> 
    <div class="bar" style="width: 40%;"></div> 
</div> 

어떤 도움을 주시면 감사하겠습니다!

Answer 1

먼저 폴링을 실제로 수행하는 함수가 필요합니다. 응답을 받으면 진행률 표시 줄을 업데이트하고 원하는대로 수행합니다. 여기에 원래의 고유 함수 인 parseResponse()으로 분리 된 후 작업이 완료 될 때까지 poll()이 다시 호출됩니다.

var jobId = 12345; 

function poll() { 
    setTimeout(function() { 
    $.ajax({ 
     url: 'https://app.zencoder.com/api/v2/jobs/' + jobId + '/progress', 
     type: 'GET', 
     headers: { "Zencoder-Api-Key": 'ZENCODER READ ONLY API KEY' }, 
     //dataType: 'json', 
     success: function(data) { 
     parseResponse(data); 
     }, 
     error: function(data) { 
     console.log(data) 
     } 
    }); 
    }, 3000); 
} 

Zencoder에서 진행 상황을 확인하면 작업이 특정 상태에있을 때만 진행률 표시 줄을 업데이트하려고합니다. 여기에서는 처리 또는 완료가 아닌 한 상태를 로그 아웃합니다.이 경우 진행 막대의 너비를 실제로 변경합니다.

function parseResponse(data) { 
    switch(data.state) { 
    case 'pending': 
     console.log('Pending'); 
     poll(); 
     break; 
    case 'waiting': 
     console.log('Waiting'); 
     poll(); 
     break; 
    case 'processing': 
     console.log('processing'); 
     $('.progress .bar').css('width', Math.round(data.progress) + '%'); 
     poll(); 
     break; 
    case 'finished': 
     console.log('Finished'); 
     $('.progress').removeClass('active'); 
     $('.progress .bar').css('width', '100%'); 
     break; 
    case 'failed': 
     console.log('Failed'); 
     break; 
    case 'cancelled': 
     console.log('Cancelled'); 
     break; 
    default: 
     console.log("Wat?"); 
    } 
} 

이 설정을 마치면 poll()을 호출하여 프로세스를 시작할 수 있습니다.

여기서는 jQuery를 사용 중이며 페이지에 하나의 진행률 표시 줄 만 있다고 가정하지만 시작하는 방법에 대한 아이디어를 얻을 수 있습니다.

최근 질문

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 관련 문제

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.