Question

我拼命寻找有关如何采取zencoder进展JSON响应的信息，转换＆＃34;进展＆＃34;从响应变为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
    }
  ]
}

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

Zencoder进程JSON响应在bootstrap进度条中转换为填充宽度

1 个答案: