如何在拖动时播放HTML5视频

Question

我想创建与demo中场景编号2相同的效果。 请检查我的工作here。 （单击结果区域时，JsFiddle将起作用。）

HTML：

<canvas id="canvas"></canvas>
<br>
<input id="my-input" type="range" min="1" max="72" value="1" />

JS

var canvas = document.getElementById("canvas");
canvas.height = 1080;
canvas.width = 1920;

var totalImages = 72;
var videoFrames = [];
for (var i = 1; i <= totalImages; i++) {
  var videoFrame = new Image;
  var videoFrameUrl = 'https://rphv.net/walkthrough/tmp-' + i + '.gif'; 
  videoFrame.src = videoFrameUrl;
  videoFrames.push(videoFrame);
}

$("#my-input").on("input", function(event) {
  var currentImage = videoFrames[event.target.value - 1];
  var context = canvas.getContext("2d");
  context.drawImage(currentImage, 0, 0);
});