在HTML5视频中动态使用第一帧作为海报

Dynamically using the first frame as poster in HTML5 video?

本文关键字：一帧 海报 视频 HTML5 动态      更新时间：2023-09-26

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

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

您尝试了以下操作吗?

只需将时间以秒为单位添加到#t={seconds}到源URL:

  <video controls width="360">
    <source src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4#t=0.1" type="video/mp4" />
  </video>

我选择了一小部分秒(0.1)来保持帧数小，因为我怀疑如果你把1秒，它会"预加载";第一个1秒的视频(即24帧或更多....)。以防万一……

可以在Chrome和Firefox桌面运行:)
但不能在Android手机上运行:
我还没有在iOS、iPhone和IE上测试过??

2021年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>

祝你好运!

有一个名为Popcorn.js的插件。捕获，这将允许您从您的HTML5视频的任何框架创建海报。

浏览器有一个限制，禁止读取跨域请求的资源的像素数据(使用canvas 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();
});

我最近在一个桌面和移动设备上的项目中使用了这种方法。关键是要让它在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">';
}

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

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

我发现了一个动态添加海报到视频的好方法!

要显示所需的视频帧(在我的例子中是1.75秒的帧)-将preload="metadata"添加到视频元素，并将#t=1.75添加到源URL的末尾。

将eventListener添加到video元素中，只侦听一次play事件。事件发出后，重置视频时间。

<video width="100%" controls="controls" preload="metadata" id="myVid">
    <source src="path/to/your/video#t=1.75" type="video/mp4">
</video>
<script>
    var el = document.getElementById('myVid');
    el.addEventListener('play', () => {
        el.currentTime = 0;
    }, { once: true });
</script>

对于其他想要指定图像作为海报的人，使用poster attribute:

<video src="/path/to/video.mp4" poster="/path/to/poster.png"></video>
相关文章：