像HTML中的视频一样显示图像流

Question

I have created a PHP file extract images from MySQL database and display them as a sequence of images updated every half second. So every half second the page gets updated and a new picture comes up using setInterval method in JavaScript.

$(document).ready(function(){
setInterval(function() {
    var myImageElement = document.getElementById('myImage');
    myImageElement.src ='http://145.71.111.87/getImage.php?id='+ counter;
}, 500);});

counter is an id changed every time and the image that match this id get fetched every time. I want to display this stream in a similar way to a video in YouTube for instance, so I could stop, play and move the playing slider. Obviously by having the counter we can get any image in any position of the sequence.

Answer 1

Try using button elements , switch ,.index()

html

<img id="myImage" src="" />
<button>&leftarrow;</button><button>stop</button><button>start</button><button>&rightarrow;</button><label></label>

js

$(document).ready(function() {
  var counter = 0, interval, label = $("label")
  , fx = function() {
    interval = setInterval(function() {     
      var myImageElement = document.getElementById("myImage");
      myImageElement.onload = function() {label.html(counter)};
      myImageElement.src = "/path/to/image/getImage.php?id=" + counter;     
      ++counter;
    }, 500);
    };
  fx()
  $("button").click(function() {
    clearInterval(interval);
    switch ($(this).index("button")) {
      case 0: label.html(--counter);break;
      case 1: clearInterval(interval);break;
      case 2: fx();break;
      case 3: label.html(++counter);break;
    };
  })
});