js实现两个视频的上下切换

最新推荐文章于 2024-04-19 09:19:44 发布

我是梦磊OL

最新推荐文章于 2024-04-19 09:19:44 发布

阅读量155

点赞数

分类专栏： js 文章标签： javascript 音视频 html

本文链接：https://blog.csdn.net/m0_68094390/article/details/130797126

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

该HTML代码示例展示了如何通过监听滚动事件来切换两个嵌入在页面中的视频。当用户向下滚动时，顶部视频暂停并隐藏，底部视频开始播放并显示；向上滚动时，操作反之。此功能通过CSS和JavaScript协同实现。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      .container {
  height: 400px;
  display: flex;
  flex-direction: column;
}

.top-container {
  height: 400px;
    width: 400px;
  background-color: #8CC7B5;
  overflow: hidden;
}

.bottom-container {

    width: 400px;
  height: 0;
  background-color: pink;
  overflow: hidden;
}
    </style>
</head>
<body>
<div class="container">
  <div class="top-container">
      <video src="22.mp4" controls="controls" width="400px" height="400px" id="video1">
您的浏览器不支持 video 标签。
     </video>
  </div>
  <div class="bottom-container">
         <video src="11.mp4" controls="controls" width="400px" height="400px" id="video2">
您的浏览器不支持 video 标签。
     </video>
  </div>
</div>
</body>
<script>

var container = document.querySelector('.container');
var topContainer = document.querySelector('.top-container');
var bottomContainer = document.querySelector('.bottom-container');
// 获得视频DOM
var video1 = document.getElementById("video1")
var video2 = document.getElementById("video2")
container.addEventListener('wheel', function(event) {
  // Delta Y是指滚轮滚动的距离，上滚是负数，下滚是正数
  var deltaY = event.deltaY;

  if (deltaY > 0 && topContainer.offsetHeight > 0) {
    // 下滚并且顶部容器未完全隐藏
    topContainer.style.height = '0';
    bottomContainer.style.height = '400px';
    video1.pause();
    video2.play();
  } else if (deltaY < 0 && bottomContainer.offsetHeight > 0) {
    // 上滚并且底部容器未完全隐藏
    topContainer.style.height = '400px';
    bottomContainer.style.height = '0';
    video2.pause();
    video1.play();
  }

  // 阻止滚动条滚动
  event.preventDefault();
});
</script>
</html>