快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

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

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

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

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

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

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

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

Demo




    
        
        视频封面

    

    
        
            
            
        
    

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

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


文章名称:HTML5中videoposter属性怎么设置视频封面
文章来源:http://6mz.cn/article/jsjoic.html

其他资讯