javascript-动态地将第一帧用作HTML5视频中的海报?

我想知道是否有任何简单的方法可以实现此效果,而无需后端代码提取框架,将其另存为jpg并将其存储在某个地方。

当视频加载时,视频的第一帧只是显示为海报的效果会非常有用(只有在浏览器可以明显播放视频的情况下才起作用,这可能与传统上的poster有点不同, 但这不是问题。

Damon asked 2020-08-10T15:31:39Z
6个解决方案
30 votes

您尝试了以下吗?

只需将以秒为单位的时间#t = {seconds}附加到源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上进行测试?

Juergen Fink answered 2020-08-10T15:32:38Z
19 votes

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

});
Rick answered 2020-08-10T15:31:56Z
13 votes

我最近是针对最近在台式机和移动设备上运行的项目进行的操作。 诀窍是使其能够在iPhone上运行。

设置autoplay适用于台式机和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">';
}
drumnbace answered 2020-08-10T15:33:11Z
13 votes

为简单起见,您只需将<video width="400" controls="controls" preload="metadata"> <source src="https://www.w3schools.com/html/mov_bbb.mp4#t=0.5" type="video/mp4"> </video>添加到视频标签中,并将第一帧的第二个#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>

祝你好运!

coin hive answered 2020-08-10T15:33:36Z
7 votes

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

James Westgate answered 2020-08-10T15:33:55Z
1 votes

#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);
     });
});
Adilet Murzaliev answered 2020-08-10T15:34:16Z
translate from https://stackoverflow.com:/questions/7323053/dynamically-using-the-first-frame-as-poster-in-html5-video