Draw video frame-by-frame on html5 canvas and control with slider

Question

I am creating a walkthrough video where the user can slide a UI slider across the screen, and the camera will walk through through a 3D space.

The video has been exported as jpg frames, and numbered 0 to 350.jpg.

I am pre-loading all of the frames first, and then applying the function to the slider change.

This is the canvas

<canvas id="walkthrough" width="1280" height="300"></canvas>

This is the function from the jQuery UI slider applying data.value

$("[data-slider]")
.each(function () {
  var input = $(this);
  $("<span>")
    .addClass("output")
    .insertAfter($(this));
})
.bind("slider:ready slider:changed", function (event, data) {
  $(this)
    .nextAll(".output:first")
      .html(data.value.toFixed(3));
});

This is the image prelaod function

var totalImages = 50; // Wow, so many images for such a short clip
var images = new Array();
for(var i = 1; i < totalImages; i++) {
    var filename = '/walkthrough/' + i + '.jpg'; // Filename of each image
    var img = new Image;
    img.src = filename;
    images.push(img);
}

This is the function that should draw the image to canvas when the slider is changed

$("#my-input").bind("slider:changed", function (event, data) {
    var currentimage = '/walkthrough/' + data.value + '.jpg';
    var canvas = document.getElementById("walkthrough");
    var context = canvas.getContext("2d");
    context.drawImage(currentimage,10,10);
});

I have tried to adapt this code from an article I read here which is using the scroll position to draw the image instead of a data.value.

http://elikirk.com/canvas-based-scroll-controlled-backgroud-video-use-parallax-style-web-design/

I appreciate any help with this!

Answer 1

Here's a demo that uses a slider to change the image drawn on a canvas. Some notable differences from your code:

• uses the native HTML5 slider instead of jQuery UI
• use the input event instead of the change event to detect slider changes
• access the slider value with event.target.value instead of data (which isn't defined on the input event)
• use the slider value as an index into the array of pre-loaded images instead of a file path

var canvas = document.getElementById("canvas");
canvas.height = 150;
canvas.width = 400;

var totalImages = 72;
var videoFrames = [];
for (var i = 1; i <= totalImages; i++) {
  var videoFrame = new Image;
  var videoFrameUrl = 'http://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);
});

html,
body {
  height: 100%;
  margin: 0 auto;
}
canvas {
  height: 150px;
  width: 400px;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas"></canvas>
<br>
<input id="my-input" type="range" min="1" max="72" value="1" />