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

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

　  此时可使用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. 队列&生产者消费者模型

    队列 ipc机制:进程通讯 管道:pipe 基于共享的内存空间 队列:pipe+锁 queue from multiprocessing import Process,Queue ### 案例一 q ...

  2. Linux之find命令

    1.find命令的作用 主要用于操作系统文件.目录的查找. 2.find命令常用参数 -name #按文件名查找 -type #按文件类型查找:b/p/c/p/l/f -size #但文件大小查找,G ...

  3. 第九次作业——DFA最小化，语法分析初步

    老师:MissDu 提交作业 1.将DFA最小化:教材P65 第9题 答: 2.构造以下文法相应的最小的DFA S→ 0A|1B A→ 1S|1 B→0S|0 3.自上而下语法分析,回溯产生的原因是 ...

  4. jquery.validate的一个bug

    在用jquery.validate.js做输入验证中,用到了对某个字段重复性的判断,就是在某字段的验证中使用remote进行输入时用ajax不断向后台发送请求,但是奇怪的是,在你在data:{}中用n ...

  5. React-Native——html/css

    做前端开发,熟悉了HTML+CSS+JS的开发模式,如果不看RN原理,直接用老一套的逻辑思维上手RN,可能会大跌眼镜.高效开发的前提,需要学习并理解RN的原理.本文主要记录内容是,关于RN开发的HTM ...

  6. [TimLinux] CSS 计数功能实现递归目录

    内容引用自<css世界>: count-reset 与 counter 为父子关系,兄弟关系会导致序号混乱 调用一次 count-increment 将给序号进行一次报数,调用 count ...

  7. Pandas里面常用的一些数据分析函数总结

    import pandas as pdimport numpy as np pandas 有两个主要的数据结构:Series 和 DataFrame:Series 是一个一维数组对象 ,它包含一组索引 ...

  8. 初次接触tensorflow

    要确保已经明白神经网络和卷积神经网络的原理.如果不明白,先学习参考资料1.tensorflow中有很多api,可以分成2大类.1类是比较低层的api(tf.train),叫TensorFlow Cor ...

  9. 【CSS】330- 手把手教你玩转 CSS3 3D 技术

    点击上方"前端自习课"关注,学习起来~ CSS3的3D起步 要玩转css3的3d,就必须了解几个词汇,便是透视(perspective).旋转(rotate)和移动(transla ...

  10. 每周一练 之 数据结构与算法（Stack）

    最近公司内部在开始做前端技术的技术分享,每周一个主题的 每周一练,以基础知识为主,感觉挺棒的,跟着团队的大佬们学习和复习一些知识,新人也可以多学习一些知识,也把团队内部学习氛围营造起来. 我接下来会开 ...