html点击按钮之后弹窗显示视频并且播放

可以使用以下步骤来实现：

1. 在 HTML 中添加一个按钮和一个空的弹窗，如下所示：

<button id="play-video">播放视频</button>

<div id="video-modal"></div>

2. 使用 JavaScript 监听按钮的点击事件，并在点击时打开弹窗，如下所示：

const playButton = document.getElementById('play-video');
const videoModal = document.getElementById('video-modal');

playButton.addEventListener('click', () => {
  videoModal.innerHTML = `
    <video controls autoplay>
      <source src="path/to/video.mp4" type="video/mp4">
    </video>
  `;
  videoModal.style.display = 'block';
});

3. 在弹窗中添加一个 `<video>` 元素，并设置其属性为 `controls` 和 `autoplay`，以便用户可以控制视频播放和自动播放。还需要将 `<source>` 元素的 `src` 属性设置为要播放的视频的路径和 `type` 属性设置为视频格式的 MIME 类型。

4. 最后，使用 CSS 样式来使弹窗居中并覆盖页面的其余部分，如下所示：

#video-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  display: none;
}

#video-modal video {
  max-width: 80%;
  max-height: 80%;
  display: block;
  margin: 0 auto;
}

这样，当用户点击按钮时，弹窗将显示，并且视频将开始自动播放。用户可以使用弹窗中的控件控制视频播放。