时间戳

首页 > 解决方案 > 在 html5 中将图像 url 列表作为视频播放

video-streaming - 在 html5 中将图像 url 列表作为视频播放

问题描述

我有一个图像 url 列表，它们是从安全摄像头拍摄的备份图像。它们在 nginx 代理后面提供服务。

有没有办法像视频一样播放图像？我目前一次将 10 个图像附加到一个 div 并使用 z-index 一次显示一个。

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

这是我的数据示例：

["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"]

标签： video-streaminghtml5-video

解决方案

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

不直接，不。您必须创建一个视频并通过 MediaSource Extensions 或作为常规 Blob 加载它。这将需要一个编解码器，因为您的源格式是 JPEG。

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

模拟视频播放器的控件将比弄乱视频容易得多。

使用 z-index 一次显示一个

我会visibility: hidden改用。如果您只是堆叠了一堆图像并正在更改z-index，那么您可能会为浏览器创建大量工作，因为它会将这些图像放在不同的图层上并稍后将它们合成在一起，即使特定的帧不是见过。（检查您的开发人员工具中的性能，进行实验，然后查看。）

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

  1. 创建画布元素。
  2. 使用 CanvasCaptureMediaStream 从画布内容中获取 MediaStream。
  3. 使用 MediaRecorder 将该 MediaStream 记录为可管理的内容，例如 WebM 中的 VP9 视频。

即使在那之后，您也必须稍微破解生成的 WebM 才能让它在浏览器中播放，但它会起作用。

推荐阅读