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

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
    }
  ]
}

我想每半秒左右获取一次更新的“进度”值，并用它来填充 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，并且页面上只有一个进度条，但这应该让您了解如何开始。