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

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

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

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

　  Demo

<!DOCTYPE HTML>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <title>视频封面</title>

    </head>

    <body>

        <video width="400" height="400" poster="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1574066857005&di=
27dc7334bc80c4336d3443e8ecde3160&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F17%2F02%2F06%2Fed0c0ddc6271b0717ca64ffdf847eab6.jpg" controls>

            <source src="https://www.w3school.com.cn/i/movie.mp4" type="video/mp4">

            <source src="https://www.w3school.com.cn/i/movie.mp4" type="video/ogg">

        </video>

    </body>

</html>

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

H5 video poster属性—设置视频封面的更多相关文章

  1. 解决微信小程序Video 某些属性设置不起作用问题

    <video controls="{{false}}" autoplay="{{true}}"></video> 设置属性务必要使用{{ ...

  2. 【转】视频H5 video最佳实践

    原文地址:https://github.com/gnipbao/iblog/issues/11 随着 4G 的普遍以及 WiFi 的广泛使用,手机上的网速已经足够稳定和高速,以视频为主的 HTML5 ...

  3. H5 video标签的属性

    35-video标签 video标签的属性 src: 用于告诉video标签需要播放的视频地址 autoplay: 用于告诉video标签是否需要自动播放视频 controls: 用于告诉video标 ...

  4. 视频H5のVideo标签在微信里的坑和技巧

    随着 4G 的普遍以及 WiFi 的广泛使用,手机上的网速已经足够稳定和高速,以视频为主的 HTML5 也越来越普遍了,相比帧动画,视频的表现更加丰富,前段时间开发了一个以视频为主的移动端 HTML5 ...

  5. video设置视频的宽高

    一般情况下<video loop="loop" style="width: 100%;height:300px;" controls="cont ...

  6. video设置视频的播放位置（本例中实现效果是视频第一次播放完成后，接下来中从视频的中间部位开始循环播放）

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. H5 video自定义视频控件

    1.自定义效果截图 2.效果源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  8. H5 video标签视频加载存在的问题

    客户发现上传的视频无法播放,然后主管让我解决这个问题,这个页面不是我负责的,我看了代码,发现视频用的h5标签video标签加载视频.我看了没问题,然后 我先用ie浏览器打开,视频加载没问题.然后我给主 ...

  9. 视频（video）属性

    Figure 3视频相关的属性: 属性 值 描述  muted muted  定义音频的初始状态,目前仅支持muted.   crossorigin  空  定义当前视频是否是一个跨域的项目.  me ...

随机推荐

  1. (python)查看糗事百科文字 点赞 作者 等级 评论

    import requestsimport reheaders = { 'User-Agent':'Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; ...

  2. 计算机通过远程连接登录windows虚拟机具体配置流程

    1.打开一台windows虚拟机右击开始,选择——计算机———属性 2.点击允许运行任意版本远程桌面虚拟机连接,点击确定 3.打开服务管理器——用户,如图我一会要用”lisi“用户远程登录此虚拟机 4 ...

  3. nginx代理跨域，根据路径参数改变目标服务器地址

    我们都知道nginx是可以做跨域代理的: location ^~ /visited-path/ { proxy_pass http://another-domain/; } 举个例子:假如我们的代理服 ...

  4. 图解leetcode —— 395. 至少有K个重复字符的最长子串

    前言: 每道题附带动态示意图,提供java.python两种语言答案,力求提供leetcode最优解. 描述: 找到给定字符串(由小写字符组成)中的最长子串 T , 要求 T 中的每一字符出现次数都不 ...

  5. vue-socket.io使用教程与踩坑记录

    全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/12018866.html,多谢,=.=~ (如果对你有帮助的话请帮我点个赞啦) 请先允许我狠狠吐个 ...

  6. Apache服务——个人用户主页功能

    使用Apache服务部署静态网站(二) 个人用户主页功能 Apache服务程序中有个默认未开启的个人用户主页功能,能够为所有系统内的用户生成个人网站,确实很实用哦~ 第1步:开启个人用户主页功能: [ ...

  7. BZOJ1001: [BeiJing2006]狼抓兔子(优化的dinic或转化对偶图求最短路)

    1001: [BeiJing2006]狼抓兔子 Time Limit: 15 Sec  Memory Limit: 162 MBSubmit: 30078  Solved: 7908[Submit][ ...

  8. Python文件头注释的含义,你肯定不懂

    前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:冰火梦幻  本文档描述了Python语言文件头里典型注释的含义. 1. ...

  9. [从今天开始修炼数据结构]图的最小生成树 —— 最清楚易懂的Prim算法和kruskal算法讲解和实现

    接上文,研究了一下算法之后,发现大话数据结构的代码风格更适合与前文中邻接矩阵的定义相关联,所以硬着头皮把大话中的最小生成树用自己的话整理了一下,希望大家能够看懂. 一.最小生成树 1,问题 最小生成树 ...

  10. CCF-CSP题解 201612-3 权限查询

    一共有三层信息,三层信息的依赖关系是: \[用户user->角色role->权限authority\] 先存储\(authority\)信息,\(role\)直接存储\(authority ...