HTML5中videoposter属性怎么设置视频封面

小编给大家分享一下HTML5中video poster属性怎么设置视频封面,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

成都创新互联公司主要从事成都网站设计、做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务上高,十载网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108

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

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

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

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

Demo




    
        
        视频封面

    

    
        
            
            
        
    

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

以上是“HTML5中video poster属性怎么设置视频封面”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


网站标题:HTML5中videoposter属性怎么设置视频封面
本文网址:http://hxwzsj.com/article/jsjoic.html

其他资讯

Copyright © 2025 青羊区翔捷宏鑫字牌设计制作工作室(个体工商户) All Rights Reserved 蜀ICP备2025123194号-14
友情链接: 成都网站制作 重庆外贸网站建设 网站建设费用 成都网站设计 重庆手机网站建设 手机网站设计 四川成都网站建设 成都网站建设 成都网站设计公司 成都网站建设 成都网站建设 成都网站设计公司 成都网站建设推广 重庆网站建设 LED网站设计方案 成都网站制作公司 H5网站制作 重庆企业网站建设 网站建设公司 成都商城网站制作 网站建设方案 温江网站设计