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

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

　  此时可使用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. 安装PHP5和PHP7

    5月25日任务 课程内容: 11.10/11.11/11.12 安装PHP511.13 安装PHP7php中mysql,mysqli,mysqlnd,pdo到底是什么http://blog.csdn. ...

  2. python_编程面试题

    使用递归方法对一个数组求最大值和最小值 """ 用递归算法求解一个数组的最大值和最小值 思路: 1.首先假设这个列表只有1个元素或两个元素 2.再考虑超过两个元素的情况, ...

  3. [动图演示]Redis 持久化 RDB/AOF 详解与实践

    Redis 是一个开源( BSD 许可)的,内存中的数据结构存储系统,它可以用作数据库.缓存和消息中间件.它支持的数据类型很丰富,如字符串.链表.集 合.以及散列等,并且还支持多种排序功能. 什么叫持 ...

  4. [ch05-02] 用神经网络解决多变量线性回归问题

    系列博客,原文在笔者所维护的github上:https://aka.ms/beginnerAI, 点击star加星不要吝啬,星越多笔者越努力 5.2 神经网络解法 与单特征值的线性回归问题类似,多变量 ...

  5. 声明式服务调用Feign

    什么是 Feign Feign 是种声明式.模板化的 HTTP 客户端(仅在 consumer 中使用).   什么是声明式,有什么作用,解决什么问题? 声明式调用就像调用本地方法一样调用远程方法;无 ...

  6. zuul+security跨域Cors问题解决

    zuul+security跨域Cors问题解决 简介 场景 在服务后台都会出现跨域cors问题,不过一般spring解决起来比较方便,在框架+框架的基础上,问题就显得特别明显了,各种冲突,不了解源码的 ...

  7. SpringBoot中JdbcTemplate

    步骤如下: 依赖: <dependency> <groupId>org.springframework.boot</groupId> <artifactId& ...

  8. python 金融应用（一）期权定价公式的计算

    一.基于不付息的欧式期权看涨BSM公式 假定股票服从下列微分方程: 期权定价公式: 二.蒙特卡洛模拟 import numpy as np import math from time import t ...

  9. tensorflow mnist模块详解

    tensorflow的官方文档是以mnist数据集为例子开始的.文档本身没有介绍tensorflow.contrib.learn.python.learn.datasets.mnist模块.要想用te ...

  10. Linux服务器绑定多网卡IP

    需求:在1台Linux上绑定两个公网IP,实现扩展IP用于专用的服务 问题:添加了一个网卡上绑定1个弹性IP,主网卡绑定的公网ip可以正常访问,但是扩展网卡的公网ip无法访问. 原因:没有设置路由规则 ...