Question

我正在建立一个视频托管网站。我的视频播放器通过onclick（）函数生成视频播放器屏幕截图。我也不确定这些图像在生成后是否被删除或存储。

我尝试在这里冲浪，试图找到确定的帮助，因为我缺乏JavaScript知识，这真令人沮丧。请帮我。问我是否需要更多信息。：）

这是我的html：

    <body>
      <div id="videoPanel">
        <div id="instructions">
          <video id="my_video_1" class="video-js vjs-default-skin" width="720px" height="400px" controls preload="none" poster='' autoplay data-setup='{ "aspectRatio":"640:500", "playbackRates": [1, 1.5, 2] }'>
            <source src="/Custom-Video-Player/Masamune kun no Revenge - 07.mp4" type='video/mp4' />
          </video>
        </div>
        <button id="clicker" onclick="shoot()">Capture</button><br />
        <button id="download" onclick=""> download</button> <br/>
        <div id="output" style="display: inline-block; top: 4px; position: relative; border: dotted 1px #ccc; padding: 2px;"></div>

      </div>
    </body>

这是用于生成屏幕截图的javascript：

var videoId = 'my_video_1';
var scaleFactor = 0.25;
var snapshots = [];

var w = 720 * scaleFactor;
var h = 400 * scaleFactor;

function capture(video, scaleFactor) {
  if (scaleFactor == null) {
    scaleFactor = 1;
  }

  var canvas = document.createElement('canvas');
  canvas.width = w;
  canvas.height = h;
  var ctx = canvas.getContext('2d');
  ctx.drawImage(video, 0, 0, w, h);
  return canvas;
}

function shoot() {
    var video = document.getElementById(videoId);
    var output = document.getElementById('output');
    var canvas = capture(video, scaleFactor);
    canvas.onclick = function () {
      window.open(this.toDataURL());
    };
    snapshots.unshift(canvas);
    output.innerHTML = '';
    for (var i = 0; i < 4; i++) {
      output.appendChild(snapshots[i]);
    }
}

还有一个我希望能够如此运行的下载按钮：

它将根据“捕获”按钮的生成顺序对所有图像进行编号，并将其全部放入zip文件中，并在按下下载按钮时进行下载。

将多个html5生成的图像下载为zip文件

0 个答案: