动态地使用第一帧作为HTML5视频中的海报？

Question

我想知道是否有任何直接的方法来实现这种效果，而不需要后端代码来提取帧，将其保存为jpg和数据库。

当视频加载时，视频的第一帧显示为海报的效果非常有用（只有当浏览器显然可以播放视频时才会起作用，这可能与poster传统工作方式略有不同，但这不是一个问题。

Answer 1

有一个名为Popcorn.js的Popcorn.capture插件，它允许您从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();

});

Answer 2

你试过以下吗？

只需在几秒钟内附加时间#t = {秒}到源URL：

<video width="300" height="150">
   <source src="testvideo.mp4#t=0.1" type="video/mp4" />
</video>

我选择了一小部分秒（0.1）来保持帧数小，因为我怀疑如果你放1秒，它会“预加载”前1秒的视频（即24帧或更多...... ）。以防万一 ...

适用于桌面上的Chrome和Firefox :) 但不适用于Android手机:( 我没有在iOS，iPhone，IE上测试过吗？

Answer 3

我最近为最近在桌面和移动设备上工作的项目做了这个。诀窍是让它在iPhone上运行。

设置preload=metadata适用于台式机和Android设备，但不适用于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">';
}

Answer 4

为简单起见，您只需将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>

祝你好运！

Answer 5

您可以在视频元素上设置preload='auto'以自动加载视频的第一帧。

Answer 6

＃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);
     });
});