在html5画布上逐帧绘制视频并使用滑块进行控制

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" />