html动态做成视频,javascript-动态地将第一帧用作HTML5视频中的海报？

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

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

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

6个解决方案

30 votes

您尝试了以下吗？

只需将以秒为单位的时间＃t = {seconds}附加到源URL：

我选择了几分之一秒(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 = '';

} else {

$videoTag = '';

}

drumnbace answered 2020-08-10T15:33:11Z

13 votes

为简单起见，您只需将

添加到视频标签中，并将第一帧的第二个#t=0.5添加到视频源中：

祝你好运！

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()来重置默认框架。

$(function () {

let videoJs = videojs('my-video');

videoJs.one('play', function () {

this.currentTime(0);

});

});

Adilet Murzaliev answered 2020-08-10T15:34:16Z