Javascript 基于视频下载的进度条_Javascript_Html_Video_Download_Progress Bar

Javascript 基于视频下载的进度条

javascript html video download

Javascript 基于视频下载的进度条,javascript,html,video,download,progress-bar,Javascript,Html,Video,Download,Progress Bar,下面是我正在开发的一个电子桌面应用程序的一段代码，该应用程序使用youtube dl下载视频如何根据视频下载的进度点显示进度条？下面是我的尝试，但我无法让进度条随视频一起更新 HTML: <body> <form id="target"> <input type="text" id="video_url" /> <input type="submit" value="Submit" /> </form>

下面是我正在开发的一个电子桌面应用程序的一段代码，该应用程序使用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>

"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();

});