Прогресс Zencoder. Реакция JSON, преобразованная в ширину заполнения в баре повышения уровня.

. Я отчаянно искал информацию о том, как выполнить процесс JSON-анализа zencoder, преобразовать переменную «прогресс» из ответа в переменную javascript и использовать ее для заполнения число в значении ширины css.Прогресс Zencoder. Реакция JSON, преобразованная в ширину заполнения в баре повышения уровня.

Более подробная информация о реакции 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 
    } 
    ] 
}

Я хочу, чтобы получить обновленное значение «прогресс» каждые полсекунды или так и использовать его для заполнения значения ширины в Twitter Boostraps прогресса баре:

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

Любой помощь будет чрезвычайно признателен!

источник

2013-07-22 user2608266

Возможно, это полезно: http://www.bootply.com/67388 Его необходимо изменить, чтобы вы запросили/опросили результаты на определенном интервале, а затем обновите индикатор выполнения соответственно. – ZimSystem

Сначала вам нужна функция, чтобы на самом деле сделать опрос. Когда ответ получен, вы обновите индикатор выполнения и сделаете все, что захотите. Здесь у меня есть это разделение на отдельную, несерьезно названную функцию, 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 и на странице есть только один индикатор выполнения, но это должно дать вам представление о том, как начать работу.

источник

2013-07-23 02:42:44

Большое спасибо за это. ответ. Хотя код выглядит абсолютно идеальным для того, что мне нужно, я не могу заставить его работать. У меня есть только один индикатор выполнения на странице, но я не уверен, как обеспечить, чтобы jQuery был установлен в моем приложении/сервере. Прошу прощения, если я наивна - я знаю свой путь вокруг PHP, но очень мало javascript. Любая помощь будет принята с благодарностью! Tom – user2608266

Простите, я просто предположил, что вы включили jQuery, поскольку Bootstrap JS - это все плагины jQuery. Вы должны увидеть включение в верхней части страницы '

Прогресс Zencoder. Реакция JSON, преобразованная в ширину заполнения в баре повышения уровня.

ответ

Смежные вопросы