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

Question

我创建了一个 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);});

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

Answer 1

尝试使用 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;
    };
  })
});

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

Display stream of Images like a video in HTML

html

javascript

css

php

video-streaming