0

I want to create same effect as in scene number 2 in the demo. Please check my work here. (JsFiddle will work when you click on result area).

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);
});
Technotronic
  • 8,424
  • 4
  • 40
  • 53
abhishek joshi
  • 1
  • 1
  • What exactly are you asking? It looks like you managed to do what you want.. – Technotronic Dec 27 '16 at 13:27
  • I have extract images from video frame by frame and implemented in canvas. But I want same effect in video and not as image – abhishek joshi Dec 27 '16 at 13:30
  • You won't have better results than these still images with a video element. changing the currentTime is asynchronous and usually requires new requests to be made. So what you are doing is probably the best you can do. However, you may be interested in a way to [programmatically extract these video frames](http://stackoverflow.com/questions/32699721/javascript-extract-video-frames-reliably/32708998#32708998) from a video element (beware extraction is made at reading speed, which means it needs some pre-loading time. – Kaiido Dec 27 '16 at 13:43
  • Hello Thank you very much for your reply. But what i am looking is to use sprite images and on drag event sprite images position should be move – abhishek joshi Dec 29 '16 at 12:59

0 Answers0