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

好的，关于HTML5视频遮罩层和全屏视频动态背景示例，下面是一些代码和说明：

HTML部分：

<!-- 定义视频 -->
<video id="video-background" preload="auto" autoplay="autoplay" loop="loop" muted="muted">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogv" type="video/ogg">
  Your browser does not support the video tag.
</video>

<!-- 定义遮罩层 -->
<div id="video-overlay"></div>

CSS部分：

/* 设置视频尺寸和遮罩层的尺寸并使其重叠 */
#video-background, #video-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 设置遮罩层的背景颜色和透明度 */
#video-overlay {
  background-color: rgba(0,0,0,0.5);
}

/* 隐藏视频控制条 */
video::-webkit-media-controls {
  display:none !important;
}

video::-webkit-media-controls-enclosure {
  display:none !important;
}

video::-webkit-media-controls-panel {
  display:none !important;
}

video::-webkit-media-controls-overlay-play-button {
  display:none !important;
}

video::-webkit-media-controls-play-button {
  display:none !important;
}

video::-webkit-media-controls-start-playback-button {
  display:none !important;
}

JavaScript部分：

// 自适应视频尺寸
function scaleVideoSize() {
  var video = document.getElementById('video-background');
  var videoWidth = video.videoWidth;
  var videoHeight = video.videoHeight;
  var windowWidth = window.innerWidth;
  var windowHeight = window.innerHeight;
  var scale = Math.max(windowWidth / videoWidth, windowHeight / videoHeight);
  video.width = videoWidth * scale;
  video.height = videoHeight * scale;
}

window.addEventListener('resize', scaleVideoSize);
scaleVideoSize();

这段代码会自适应视频尺寸并使其全屏显示。遮罩层的透明度可以通过修改rgba中的最后一个参数来调整。

希望这能够帮助到你。