【发布时间】：2011-11-11 11:46:18
【问题描述】：
我想知道是否有任何直接的方法可以实现这种效果，而无需后端代码来提取帧，将其保存为 jpg 并将其数据库化。
当视频加载时视频的第一帧仅显示为海报的效果非常有用（只有在浏览器可以明显播放视频时才会起作用，这可能与@的方式略有不同987654321@ 传统上有效，但这不是问题。
【问题讨论】：
标签： javascript html html5-video poster
【发布时间】：2011-11-11 11:46:18
【问题描述】：
您是否尝试过以下操作？
只需将时间（以秒为单位）#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 月编辑：
我意识到现在许多现代浏览器会自动显示第一帧的海报。
好像他们听到了我们的声音:-)
【讨论】：
-
应该被接受的答案。这个简单的 hack 不需要繁重的库。
-
重要的是参数 preload 没有设置为
none或者它没有给出并且默认值auto或者手动设置为preload="auto"。 -
这显着增加了我的页面加载时间，即使是很小的
t值。 -
谢谢，这应该是公认的答案，没有人愿意为此使用库。
为简单起见，您只需将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();
});
【讨论】：
-
看起来像我需要的。不幸的是，无法让爆米花本身工作......每当我打电话给它时都会得到
Uncaught Error: INVALID_STATE_ERR: DOM Exception 11 popcorn.js:389 Popcorn.extend.Popcorn.forEach.ret popcorn.js:389。 -
看起来您没有等待加载视频。我已经更新了上面的代码示例以等待然后设置海报。
-
谢谢.. 让它工作。在大多数情况下.. 我从文档中得到的印象是
this.capture({at: 1}).currentTime(0);会在 1 秒后抓取一张海报，然后将视频放在开头，但它会在 1 秒后离开。你有什么经验吗用那个？ -
实际上，这对我来说听起来像是一个错误:) 你能在 github repo 上提出问题吗
-
我只是让它开始播放并在加载的第一帧停止
我最近为一个在桌面和移动设备上运行的项目做了这个。诀窍是让它在 iPhone 上运行。
设置preload=metadata 适用于台式机和安卓设备，但不适用于 iPhone。
对于 iPhone，我必须将其设置为 autoplay，以便海报图像在初始加载时自动出现。 iPhone 会阻止视频自动播放，但会出现海报图像。
我必须使用此处找到的 Pavan 的答案检查 iPhone。 Detect iPhone Browser。然后根据设备使用带或不带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">';
}
【讨论】：
-
此答案解释了问题发生的原因并提供了解决方法。请记住，在 iOS 10 中，如果满足某些条件，则可能会使用自动播放属性。所以我建议大家立即暂停视频以防止实际自动播放。
-
@Alessandro 你能展示一些我们如何在 ios 10 中处理这个问题的代码吗？谢谢
-
类似
var video = document.createElement('video'); video.controls = true; video.preload = 'metadata'; if (isIphone) { video.autoplay = true; video.pause(); } -
你拯救了我的一天。你对我来说值 50 分 :)
-
除非您真的想要自动播放，否则不要使用此方法，因为 iOS 现在支持内联自动播放静音视频。
您可以在视频元素上设置preload='auto'，以自动加载视频的第一帧。
【讨论】：
-
提个建议：预加载意味着无需用户操作即可自动下载视频。这是默认情况下在桌面上的 Chrome、Firefox 和 IE 上发生的情况。所以请确保它不会恶化您页面上的用户体验。
-
好点，虽然这只是在桌面上，因为这是一个提示，而不是一个指令。有点过时但请参阅stevesouders.com/blog/2013/04/12/html5-video-preload
-
它在我的情况下工作，当鼠标悬停时视频只有 8 秒可以播放！
#2、#3 等框架的解决方案。我们需要附加一次性处理程序 .one() 来重置默认框架。
<video width="300" height="150" id='my-video'>
<source src="testvideo.mp4#t=2" type="video/mp4" />
</video>
$(function () {
let videoJs = videojs('my-video');
videoJs.one('play', function () {
this.currentTime(0);
});
});
【讨论】：
-
显示其他框架的好主意
我找到了一种为视频动态添加海报的好方法！
要从视频中显示所需的帧（在我的情况下，它是 1.75 秒的帧） - 将 preload="metadata" 添加到视频元素，将 #t=1.75 添加到源 URL 的末尾。
将 eventListener 添加到将只侦听一次 play 事件的视频元素。
发出事件后，重置视频时间。
<video width="100%" controls="controls" preload="metadata" id="myVid">
<source src="path/to/your/video#t=1.75" type="video/mp4">
</video>
<script>
var el = document.getElementById('myVid');
el.addEventListener('play', () => {
el.currentTime = 0;
}, { once: true });
</script>
【讨论】：