HTML5-设置视频封面

发表于 分类于 Disqus：
本文字数： 910 阅读时长 ≈ 2 分钟

打开一个视频，在点击播放之前会看到一张封面图，点击之后封面消失，随即播放视频。
若现有一需求，要你自定义给某个视频设置封面，应该怎么做呢？

应用场景：

可使用 H5 video提供的poster属性即可轻松实现，poster 属性规定视频下载时显示的图像或用户点击播放按钮前显示的图像。如未设置该属性，则使用视频的第一帧代替。

代码展示:

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>1025-生日快乐哈</title>
    </head>
    <body>
        <video width="60%" height="50%" poster="http://p5.music.126.net/j0eAy04FAtpavkgLDmkyWQ==/109951165417326499?imageView=1&type=webp&thumbnail=800x0&quality=60" controls>
            <source src="http://vodkgeyttp8.vod.126.net/vodkgeyttp8/P3Ktruh9_3177831959_uhd.mp4?wsSecret=9d9d9bafc2026aea0dd309facb914d69&wsTime=1614426964" type="video/mp4">
            <source src="http://vodkgeyttp8.vod.126.net/vodkgeyttp8/P3Ktruh9_3177831959_uhd.mp4" type="video/ogg">
        </video>
    </body>
</html>

效果展示:

1025-生日快乐哈

补充：

有时会出现视频封面无法铺满的情况，需要使用object-fit属性铺满整个屏幕