Zencoder进度JSON响应已转换为在引导进度条中填充宽度

Question

我拼命寻找有关如何获取zencoder进度JSON响应的信息，如何将响应中的" progress“变量转换为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
    }
  ]
}

我想每隔半秒左右获取一次更新的" progress“值，并使用它来填充Twitter Boostraps进度条中的width值：

<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，并且页面上只有一个进度条，但这应该会让您对如何开始使用有所了解。