在 HTML 中像视频一样显示图像流 - Display stream of Images like a video in HTML

Display stream of Images like a video in HTML

我创建了一个PHP文件，从MySQL数据库中提取图像，并将它们显示为每半秒更新一次的图像序列。因此，每半秒页面就会更新一次，并且使用 JavaScript 中的 setInterval 方法会出现一张新图片。

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

计数器是每次更改的 ID，每次都会获取与此 ID 匹配的图像。例如，我想以类似于YouTube中的视频的方式显示此流，这样我就可以停止，播放和移动播放滑块。显然，通过拥有计数器，我们可以在序列的任何位置获得任何图像。

尝试使用 button 元素， 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;
    };
  })
});