html点击div播放视频,CSS2 video点击中间播放按钮播放视频代码
时间: 2024-02-18 17:03:41 浏览: 27
以下是HTML和CSS代码示例,可以在div中嵌入视频并添加样式以显示中间播放按钮:
HTML代码:
```html
<div class="video-container">
<video controls>
<source src="video.mp4" type="video/mp4">
</video>
</div>
```
CSS代码:
```css
.video-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
}
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video-container:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.6);
cursor: pointer;
}
.video-container:before:hover {
background: rgba(0, 0, 0, 0.8);
}
.video-container:before:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-left: 24px solid white;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
cursor: pointer;
}
```
这个示例使用CSS伪元素创建一个中间的播放按钮。当用户将鼠标悬停在按钮上时,按钮的背景变为深色。当用户单击按钮时,视频将开始播放。