html5视频遮罩层,HTML5实现全屏视频动态背景示例(亲测能用)

好的，以下是一个HTML5视频遮罩层和全屏视频动态背景示例：

首先，我们需要一个HTML5 video元素来嵌入视频：

<video id="bg-video" autoplay loop muted>
  <source src="video.mp4" type="video/mp4">
</video>

接下来，我们需要一个遮罩层来覆盖在视频上面：

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

我们可以使用CSS来设置遮罩层的样式，例如：

#video-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

最后，我们可以使用JavaScript来控制视频的播放和全屏显示：

var video = document.getElementById("bg-video");
video.play();

var overlay = document.getElementById("video-overlay");
overlay.addEventListener("click", function() {
  if (video.paused) {
    video.play();
  } else {
    video.pause();
  }
});

document.addEventListener("fullscreenchange", function() {
  if (document.fullscreenElement) {
    video.play();
  }
});

以上代码可以让用户点击遮罩层来暂停/播放视频，并且在进入全屏模式时自动播放视频。

希望这个示例可以对你有所帮助！