video标签优化:通过图片显示视频封面和播放icon

简介: video标签优化:通过图片显示视频封面和播放icon

image.png

在线体验

代码示例

* {
   margin: 0;
   padding: 0;
 }
 /* 图片外层容器 */
 .video-cover {
   width: 500px;
   height: 300px;
   border: 1px solid #888888;
   overflow: hidden;
   cursor: pointer;
   border-radius: 2px;
 }
 /* 图片尺寸 */
 .video-cover__image {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
 /* video icon容器 */
 .video-wrap {
   position: relative;
 }
 /* video icon */
 .video-wrap::after {
   position: absolute;
   content: "";
   width: 50px;
   height: 50px;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background-image: url("./video.png");
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
 }
 /* 定义各种尺寸的icon大小 */
 .video-wrap--mini::after {
   width: 30px;
   height: 30px;
 }
 /* 鼠标经过放大效果 */
 .scale-big {
   transition: all 1s;
 }
 .scale-big:hover {
   transform: scale(1.12);
 } 
<div class="video-cover video-wrap">
      <img
        class="video-cover__image scale-big"
        src="https://api.isoyu.com/bing_images.php"
      />
</div>


相关文章
|
NoSQL 关系型数据库 MySQL
分布式锁(redis/mysql)
分布式锁(redis/mysql)
349 1
|
网络安全
关于中国蚁剑和中国菜刀安装过程中的问题总结和解决方法
关于中国蚁剑和中国菜刀安装过程中的问题总结和解决方法
427 3
|
缓存 JavaScript 前端开发
2024 前端高频面试题之 Vue 篇
2024 前端高频面试题之 Vue 篇
1371 8
|
9月前
|
人工智能 分布式计算 Cloud Native
云原生数据仓库AnalyticDB:深度智能化的数据分析洞察
云原生数据仓库AnalyticDB(ADB)是一款深度智能化的数据分析工具,支持大规模数据处理与实时分析。其架构演进包括存算分离、弹性伸缩及性能优化,提供zero-ETL和APS等数据融合功能。ADB通过多层隔离保障负载安全,托管Spark性能提升7倍,并引入AI预测能力。案例中,易点天下借助ADB优化广告营销业务,实现了30%的任务耗时降低和20%的成本节省,展示了云原生数据库对出海企业的数字化赋能。
300 3
|
12月前
|
SQL 安全 关系型数据库
AWVS扫描在线站点实现安全评估
AWVS扫描在线站点实现安全评估
|
SQL 安全 测试技术
Kali下Sqlmap工具使用方法之POST方法篇
Kali下Sqlmap工具使用方法之POST方法篇
343 0
|
JavaScript 前端开发 搜索推荐
JS经典案例-无缝滚动轮播图(纯JS)
JS经典案例-无缝滚动轮播图(纯JS)
805 0
|
存储 缓存 数据处理
|
移动开发 网络协议 C++
|
传感器 定位技术 vr&ar
iOS 神秘而又强大的传感器系统 (附demo)
iOS中的各种传感器:          随着科技的发展,机器感知人的行为!Goole的无人驾驶汽车到李彦宏的无人驾汽车,都带入了各种计算及传感。         为了研究自然现象和制造劳动工具,人类必须了解外界的各类信息。
2712 0