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

  

 

  
 
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
  
39
  
40
  
41
  
42
  
43
  
44
  
45
  
46
  
47
  
48
  
49
  
50
  
51
  
52
  
53
  
54
  
55
  
56
  
57
  
58
  
59
  
60
  
61
 

<div class="video-cover video-wrap">
      <img
        class="video-cover__image scale-big"
        src="https://api.isoyu.com/bing_images.php"
      />
</div>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
 

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/126623315