我想知道是否有任何简单的方法可以实现这种效果，而无需后端代码来提取帧，将其保存为 jpg 并将其数据库存储在某处。
当视频加载时，视频的第一帧仅显示为海报的效果会非常有用（只有在浏览器可以明显播放视频时才有效，这可能与poster传统的工作方式略有不同，但是这不是问题。
在 HTML5 视频中动态使用第一帧作为海报？
IT技术
javascript
html
html5-video
poster
2021-03-18 00:30:04
6个回答
您是否尝试过以下操作？
只需将时间以秒为单位#t={seconds}附加到源 URL：
<video controls width="360">
<source src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4#t=0.1" type="video/mp4" />
</video>我选择了几分之一秒（0.1）来保持较小的帧数，因为我怀疑如果你放1秒，它会“预加载”视频的前1秒（即 24 帧或更多...... ）。以防万一 ...
在台式机上的 Chrome 和 Firefox 上运行良好:)
不适用于 Android 移动设备：（
我还没有在 iOS、iPhone、IE 上进行测试？？
2021 年 5 月编辑：
我意识到许多现代浏览器现在会自动显示第一帧的海报。
好像他们听到了我们的声音:-)
为简单起见，你可以只添加 preload="metadata"到您的视频标签和第一帧的第二#t=0.5到您的视频来源：
<video width="400" controls="controls" preload="metadata">
<source src="https://www.w3schools.com/html/mov_bbb.mp4#t=0.5" type="video/mp4">
</video>祝你好运！
有一个名为Popcorn.capture的Popcorn.js插件，它允许您从 HTML5 视频的任何帧创建海报。
浏览器存在一个限制，即禁止读取跨域请求的资源的像素数据（使用画布 API 记录帧的当前值）。源视频必须托管在与请求它的脚本和 html 页面相同的域上，以便此方法工作。
使用这个插件创建海报的代码非常简单：
// This block of code must be run _after_ the DOM is ready
// This will capture the frame at the 10th second and create a poster
var video = Popcorn( "#video-id" );
// Once the video has loaded into memory, we can capture the poster
video.listen( "canplayall", function() {
this.currentTime( 10 ).capture();
});
我最近为最近的一个适用于桌面和移动设备的项目做了这个。诀窍是让它在 iPhone 上运行。
设置preload=metadata适用于台式机和安卓设备，但不适用于 iPhone。
对于 iPhone，我必须将其设置autoplay为海报图像在初始加载时自动出现。iPhone 会阻止视频自动播放，但结果会显示海报图像。
我不得不使用在这里找到的 Pavan 的答案来检查 iPhone。检测 iPhone 浏览器。然后autoplay根据设备使用或不使用正确的视频标签。
var agent = navigator.userAgent;
var isIphone = ((agent.indexOf('iPhone') != -1) || (agent.indexOf('iPod') != -1)) ;
$videoTag = "";
if(isIphone()) {
$videoTag = '<video controls autoplay preload="metadata">';
} else {
$videoTag = '<video controls preload="metadata">';
}
您可以preload='auto'在视频元素上设置自动加载视频的第一帧。