html和css点击一个页面头部在页面开始自动播放一个视频播放结束后视频消失

好的，您可以使用HTML的video标签来实现视频的自动播放，再使用CSS来控制视频的显示和隐藏。

以下是示例代码：

HTML代码：

<div class="video-container">
  <video autoplay 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;
}

在HTML中，我们创建了一个包含video标签的div容器，并为video标签添加了autoplay属性以实现自动播放。我们还为video标签添加了一个ID以便后面在JavaScript中操作。

在CSS中，我们使用绝对定位将video标签置于容器的顶部，并使用padding-bottom属性来保持视频的16:9宽高比。我们还创建了一个.hide类，用于控制视频的可见性。

JavaScript代码：

const video = document.getElementById('my-video');

video.addEventListener('ended', function() {
  video.classList.add('hide');
});

这段代码会在页面加载后立即开始播放视频，并在视频结束后添加.hide类，以隐藏视频元素。

请注意，某些浏览器会禁用自动播放，因此视频可能需要等到用户点击页面才能开始播放。