Video streaming 在html5中以视频形式播放图像URL列表

我有一个图像URL列表，这些URL是从安全摄像头拍摄的备份图像。它们由nginx代理提供服务

有没有办法像播放视频一样播放图像？我目前一次向div追加10个图像，并使用z索引一次显示一个图像

但是我想要一个更好的方法，让我使用内置控件

以下是我的数据示例：

["http://0.0.0.0:7733/1/2/2018-08-14_18-44-51.jpg", "http://0.0.0.0:7733/1/2/2018-08-14_18-44-52.jpg", "http://0.0.0.0:7733/1/2/2018-08-14_18-44-53.jpg", "http://0.0.0.0:7733/1/2/2018-08-14_18-44-54.jpg", "http://0.0.0.0:7733/1/2/2018-08-14_18-44-55.jpg", "http://0.0.0.0:7733/1/2/2018-08-14_18-44-56.jpg", "http://0.0.0.0:7733/1/2/2018-08-14_18-44-57.jpg", "http://0.0.0.0:7733/1/2/2018-08-14_18-44-58.jpg", "http://0.0.0.0:7733/1/2/2018-08-14_18-44-59.jpg", "http://0.0.0.0:7733/1/2/2018-08-14_18-45-00.jpg"]

有没有办法像播放视频一样播放图像

不是直接的，不是。你必须创建一个视频，或者通过MediaSource扩展加载，或者作为一个普通Blob加载。这需要一个编解码器什么的，因为你的源格式是JPEG

但是我想要一个更好的方法，让我使用内置控件

模拟视频播放器的控件要比搞乱视频容易得多

使用z索引一次显示一个

我会使用

可见性：hidden

。如果您只是堆叠了一堆图像，并且正在更改

z-index

，那么您可能需要为浏览器创建大量工作，因为它将把这些图像放在不同的层上，然后将它们组合在一起，即使看不到特定的帧。（检查开发人员工具中的性能，进行实验，然后参见。）

如果你真的想用这些来制作视频，这是可能的，但有点讨厌：

创建画布元素

使用CanvasCaptureMediaStream从画布内容获取媒体流

使用MediaRecorder将该媒体流录制成可管理的内容，如WebM中的VP9视频

即使在那之后，你也必须对产生的WebM进行一些修改，才能让它在浏览器中运行，但它会工作的