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

Question

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

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

Answer 1

你试过以下吗？

只需在几秒钟内附加时间#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 2

有一个名为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();

});

Answer 3

为简单起见，你可以只添加 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 4

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

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

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