背景视频切换

背景视频切换

教程地址：原文地址（YouTube）

B站教程：原文转载（bilibili）

两个视频的内容相同，第二个为转载

效果图

代码区

html

<section>
  <video id='slider' autoplay muted loop src="img/video/video1.mp4"></video>
  <ul class="navigation">
    <li onclick="videoUrl(1)"><img src="img/v1.jpg"></li>
    <li onclick="videoUrl(2)"><img src="img/v2.jpg"></li>
    <li onclick="videoUrl(3)"><img src="img/v3.jpg"></li>
    <li onclick="videoUrl(4)"><img src="img/v4.jpg"></li>
  </ul>
</section>

CSS

* {
  margin: 0; /* 外边距 */
  padding: 0; /* 内边距 */
  box-sizing: border-box; /* 盒子大小规则 */
}
section {
  position: relative; /* 相对定位 */
  width: 100%; /* 宽 */
  height: 100vh; /* 高 */
}
section video {
  position: absolute; /* 绝对定位 */
  top: 0; /* 距上部 */
  left: 0; /* 距左部 */
  width: 100%;
  height: 100%;
  object-fit: cover; /* 可替换元素如何适应，此处为裁剪到合适的大小 */
}

section  .navigation {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translate(-50%); /* X移动 */
  display: flex; /* 弹性盒模型 */
  z-index: 100; /* Z轴层叠顺序 */
  justify-content: center; /* 主轴对齐方式 */
  align-items: center; /* 交叉轴对齐方式 */
}

section .navigation li {
  list-style: none; /* 清除默认样式 */
  cursor: pointer;
  margin: 0 10px;
  border-radius: 4px;
  background: #fff; /* 背景颜色 */
  padding: 3px 3px 0;
  opacity: 0.7; /* 透明度 */
  transition: 1s; /* 过渡时间 */
}
section .navigation li:hover { /* 悬停时 */
  opacity: 1; /* 通过修改透明度实现显示 */
}

section .navigation li img{
  width: 120px;
  transition: 0.5s;
}

section .navigation li img:hover {
  width: 200px; /* 修改宽度实现放大 */
}

JS

function videoUrl (vvv) {
  // 切换地址路径
  document.getElementById('slider').src = 'img/video/video' + vvv + '.mp4';
}

教程地址：原文地址（YouTube）

B站教程：原文转载（bilibili）