html5 video上显示大播放按钮

要在 HTML5 视频上显示大播放按钮，可以使用 CSS 样式和一些 JavaScript 代码来实现。以下是一个简单的示例：

HTML 代码：

<video id="myVideo" controls>
  <source src="myVideo.mp4" type="video/mp4">
</video>

CSS 代码：

#myVideo {
  position: relative;
}

#myVideo::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background: url("play-button.png") no-repeat center center;
  background-size: contain;
  cursor: pointer;
}

JavaScript 代码：

var video = document.getElementById("myVideo");
var playButton = video.querySelector("::after");

playButton.addEventListener("click", function() {
  video.play();
  playButton.style.display = "none";
});

在这个示例中，我们首先为视频元素设置了 `position: relative;` 样式，以便可以在其上方叠加其他元素。然后我们使用 `::after` 伪元素来创建一个大的播放按钮，并将其放置在视频元素的中心位置。我们还为按钮添加了 `cursor: pointer;` 样式，以便在用户将鼠标悬停在按钮上时显示指针光标。

最后，我们使用 JavaScript 代码为播放按钮添加了一个单击事件监听器，当用户单击按钮时，视频将开始播放，并将播放按钮隐藏。