在 HTML5 视频标签上生成随机预览图像

Posted 2023-05-07

【中文标题】在 HTML5 视频标签上生成随机预览图像

【英文标题】：Generating a random preview image on a HTML5 video tag

【发布时间】：2012-07-13 09:01:08

【问题描述】：

是否可以捕获使用 html5 视频元素加载的视频的快照并将其用作预览图像，直到视频加载或触发播放事件？我知道海报属性，但我希望自己生成缩略图，就像视频中的随机帧一样。类似于 YouTube/Vimeo 所做的。

谢谢，

【问题讨论】：

那怎么样：***.com/questions/7323053/…

【参考方案1】：

我认为这在纯 HTML5 中是不可能的。主要是因为当您在网页中看到“对象”时未加载流，因此客户端无法获取所需的帧。

但是，对您来说最好的选择是在加载页面之前保存/缓存“随机帧”，然后将其用作视频的海报。这将允许您减少客户端工作并节省带宽。

检查THIS，这是我发现的第一件事（如果您使用的是 php，并且想要一种“快速而肮脏”的方式来获取框架）

更新

显然HERE 有一个 popcorn.js 的解决方案，但似乎你不能按照（我想）你需要的方式来做。

这是因为由于浏览器安全问题，只能在同一域内执行此操作。

【讨论】：

Popcorn.capture.js 所做的正是我所需要的。谢谢！