点击一个页面头部在页面开始自动播放一个视频播放结束后视频消失
时间: 2024-03-18 22:42:40 浏览: 94
您可以使用JavaScript来实现这个功能。首先,您需要找到视频元素的ID或类名。然后,您可以使用JavaScript添加一个事件监听器来检测视频何时结束。最后,您可以使用CSS来控制视频的可见性。
以下是示例代码:
HTML代码:
```
<div class="video-container">
<video id="my-video" src="my-video.mp4"></video>
</div>
```
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%;
}
.hide {
display: none;
}
```
JavaScript代码:
```
const video = document.getElementById('my-video');
video.addEventListener('ended', function() {
video.classList.add('hide');
});
video.play();
```
这段代码会在页面加载后立即开始播放视频,并在视频结束后隐藏视频元素。您可以根据需要修改CSS类名和JavaScript代码来适应您的具体需求。
阅读全文