进度条/寻找Gif

Question

如何查找 gif 的播放时间？

我正在尝试为 gif 提供一个进度条，以便在特定 gif 的播放时间暂停/搜索。

我找不到任何像 gif 的

videoElement.currentTime

这样的 HTML DOM 属性/接口。 我尝试使用 gif 作为视频源，但 video dom api 似乎不接受 gif 作为源。

<video width="400" controls>
  <source src="https://link/to/a-gif-image.gif">
</video>

Answer 1

GIF 与 MP4

之前用于控制 GIF 动画图像的

问题 和 库 已经非常古老了。这是 GIF 与 MP4 动画的快速比较，并解释了为什么 MP4 在大多数情况下是更好的选择。

MP4 相对于 GIF 动画的优势

使用图形应用程序或在线转换器可以轻松将动画 GIF 图像转换为 MP4

不需要任何库
代码更容易维护（标准
• 视频元素）
文件大小要小得多
未满载即可开始播放
提供
• 事件用于控制播放和UI反馈
视觉上与 GIF 相同（直接替换）
更多...

演示片段

演示并排显示了 GIF 和 MP4。一个简单的复选框可以在暂停和搜索播放之间切换。 GIF 播放由

libgif.js 库控制。 MP4 只是一个标准的视频元素。

const toggle = document.querySelector('input[type=checkbox]');
const video = document.querySelector('video');

// See: https://github.com/buzzfeed/libgif-js/tree/master?tab=readme-ov-file#readme
const image = new SuperGif({
  gif: document.querySelector('img'),
  loop_mode: true,
  auto_play: true,
  max_width: 200,
 // on_end:.
 // loop_delay:
 show_progress_bar: false
});

image.load();

// simple play-pause toggle

toggle.addEventListener('change', () => {
  if (toggle.checked) {
    
    // seek
    video.currentTime = 0;  
    image.move_to(0);
    
    // play
    video.play();
    image.play();
    
  } else {
    video.pause();
    image.pause();
  }
})

body {
  font-family: sans-serif;
}

.container {
  display: flex;
}

figure {
  border: thin solid steelblue;
  border-radius: 0.5rem;
  display: inline-block;
}

figcaption {
  color: steelblue;
  font-weight: bold;
  text-align: center;
  padding: 0.5rem;
}

video,
img {
  width: 200px;
  height: auto;
}

<label><input type="checkbox" checked> Click to Play or Pause</label>

<div class="container">
  <figure>
    <figcaption>
      205kb Video MP4
    </figcaption>
    <video autoplay muted loop>
<source src="https://i.yourimageshare.com/i0rmDubApf.mp4">
</video>
  </figure>
  <figure>
    <figcaption>
      746kb Animated GIF
    </figcaption>
    <image src="https://i.postimg.cc/t4zZRyZH/rubik.gif" />
  </figure>
</div>

<script src="https://cdn.jsdelivr.net/gh/buzzfeed/libgif-js/libgif.js"></script>