Question

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

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

Answer 1

您是否尝试过以下操作？

只需将时间 #t = {seconds} 附加到源网址：

<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 2

有一个名为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 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='auto'以自动加载视频的第一帧。

Answer 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>

祝你好运！

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

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

6 个答案: