Question

以下是我正在使用youtube-dl下载视频的电子桌面应用程序的一段代码。

如何根据视频下载的进度点显示进度条？以下是我的尝试，但我无法将进度条与视频一起更新。

HTML：

<body>
  <form id="target">
      <input type="text" id="video_url" />
      <input type="submit" value="Submit" />
  </form>
  <progress id="myBar" value="0" max="100"></progress>
  <span id="status"></span>
</body>

使用Javascript：

"use strict";
var fs = require('fs');
var youtubedl = require('youtube-dl');

document.querySelector("#target").addEventListener("submit",function(e) {

  var url = document.getElementById("video_url").value;

  var video = youtubedl(url);

  let size = 0;
  let pos = 0;
  let progress = 0;
  var bar = document.getElementById('myBar');
  var barValue = bar.value;

  video.on('info', function(info) {
    size = info.size;
  });

  video.on('data', (chunk) => {
    pos += chunk.length;
    if (size) {
      progress = (pos / size * 100).toFixed(2);
      barValue++;
    };
  });

  video.pipe(fs.createWriteStream('video.mp4'));

  e.preventDefault();

});

基于视频下载的进度条

0 个答案: