html点击div播放视频,CSS2 video点击中间播放按钮播放视频代码

HTML代码：

<div class="video">
  <video controls>
    <source src="video.mp4" type="video/mp4">
  </video>
  <div class="play-btn"></div>
</div>

CSS2代码：

.video {
  position: relative;
}
.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.play-btn:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 25px solid white;
}
.video:hover .play-btn:before {
  border-left-color: rgba(255, 255, 255, 0.8);
}
.video video {
  width: 100%;
  height: auto;
}
.video video:focus {
  outline: none;
}
.video video::-webkit-media-controls-start-playback-button {
  display: none;
}
.video video::-webkit-media-controls-play-button {
  display: none !important;
}
.video video::-webkit-media-controls-overlay-play-button {
  display: none !important;
}
.video video::-webkit-media-controls {
  display: none !important;
}

解释：
- HTML中的`<div>`包含了一个`<video>`和一个`<div>`，后者用于显示中间的播放按钮。
- CSS2中，使用了绝对定位将播放按钮定位在视频中间。在播放按钮前使用了一个伪元素，实现了一个三角形的样式。
- 使用:hover伪类实现了鼠标悬停在播放按钮上时，三角形颜色变浅的效果。
- 去除了浏览器默认的视频控制条，并隐藏了播放按钮。