一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

H5 video poster属性设置视频封面的方法代码

时间:2020-05-27 编辑:袖梨 来源:一聚教程网

本篇文章小编给大家分享一下H5 video poster属性设置视频封面的方法代码,代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。

打开一个视频,在点击播放之前会看到一张封面图,点击之后封面消失,随即播放视频。

若现有一需求,要你自定义给某个视频设置封面,应该怎么做呢?

此时可使用H5 video提供的poster属性即可轻松实现,

poster 属性规定视频下载时显示的图像或用户点击播放按钮前显示的图像。如未设置该属性,则使用视频的第一帧代替

Demo




    
        
        视频封面

    

    
        
    

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

热门栏目