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

在线体验

• https://mouday.github.io/front-end-demo/video/index.html

代码示例

* {
   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);
 }