1

我拼命寻找有关如何获取 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>

任何帮助将不胜感激！

4

1 回答 1

3

首先，您需要一个函数来实际进行轮询。收到回复后，您将更新进度条并执行您想做的任何其他事情。在这里，我将其拆分为一个单独的、未命名的函数，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-23T02:42:44.117 回答