视频帧作为海报

Posted 2023-05-07

【中文标题】视频帧作为海报

【英文标题】：Video frame as poster

【发布时间】：2017-07-25 21:27:49

【问题描述】：

我正在使用 html5 视频，有没有办法将视频帧用作视频海报？

<video controls poster="/images/poster.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
</video>

编辑：使问题更简单。如何使用视频的最后一帧作为视频的海报图像？

【问题讨论】：

能否提供Minimal, Complete, and Verifiable example。

Dynamically using the first frame as poster in HTML5 video?的可能重复

【参考方案1】：

没有任何方法可用于提取视频帧并将其用作视频海报。只能手动完成。

这是一种很好的方法，您可以截取所需帧的屏幕截图。并将屏幕截图应用为海报。这是个好方法。

【参考方案2】：

最好的解决方案是通过一些简单的印刷筛选来获得最后一帧图像，或者获得另一个您可以找到的图像。

视频结束后，只需降低它的不透明度，直到它被隐藏并留下背景图片（如果是海报，则忽略此步骤），背景图片将保留在那里。

没有办法（至少我不知道）保持最后一帧可见（因为与动画不同，你不能在视频上说“前进”）。

您可以循环播放它，或者在它结束后将其隐藏（或显示海报，但您必须自己剪切/获取该图像）。

【参考方案3】：

试试这个

var oVideo = document.getElementsByTagName("video")[0];
oVideo.currentTime = oVideo.duration;
function remove() 
  oVideo.currentTime = 0;
  console.log("clicked");
  oVideo.removeEventListener("play", remove, false);
;
oVideo.addEventListener("play", remove, false);

不确定这是不是你想要的..

【讨论】：

顺便说一句，使用初始的html5控件可能不完善，进程栏滑到最后。尝试建立一个独特的酒吧。