在这篇博客中,我们将介绍如何使用 HTML、CSS 和 JavaScript 来创建一个网页,其中包含一个视频容器,用户可以通过滚动页面来控制视频的播放进度。这种滚动控制视频的效果常用于网页设计,以提供更吸引人的用户体验或展示创意的视觉效果。
HTML 结构:
首先,我们创建了基本的 HTML 结构,包括一个视频容器和一个加载图标。视频容器用于承载视频,加载图标则在视频加载时显示加载动画。
<div class="video-container" id="video-container">
<video id="video" muted src="视频链接" playsinline preload="auto" type="video/webm/mp4"></video>
<!-- 视频未加载完成时候的加载图标 -->
<div id="loading-icon" class="loading-icon">
<img src="https://wimg.588ku.com/gif620/21/03/20/dd927f59d06392c3cc56cb2354f00934.gif" alt="Loading">
</div>
</div>
CSS 样式:
我们使用 CSS 样式来定义视频容器和加载图标的外观,以确保它们在页面上正确显示。
<style>
.video-container #video {
width: 100%;
height: auto;
}
.video-container{
position: relative;
}
.video-container .loading-icon{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
}
.video-container .loading-icon img{
width: 8%;
display: flex;
margin: 0 auto;
}
</style>
JavaScript 功能:
使用 JavaScript,我们实现了以下功能来使视频滚动控制成为可能:
-
获取视频元素并创建用于控制视频播放的 GSAP 动画。
-
监听视频元数据加载完成的事件,一旦加载完成,就启用页面滚动、隐藏加载图标,获取视频的总时长,并设置滚动触发器。
-
使用 ScrollTrigger 插件,实现滚动时根据滚动位置来控制视频的播放进度。
-
通过计算滚动位置,确定应该显示视频的哪一帧,然后设置视频的当前时间以实现滚动控制效果。
<script>
// 获取视频元素
const videoElementBanner = document.querySelector(".video-container #video");
let gsapPart = ""; // GSAP 动画部分
// 阻止滚动
function disableScroll() {
document.body.style.overflow = "hidden"; // 隐藏垂直滚动条
}
disableScroll();
// 启用滚动
function enableScroll() {
document.body.style.overflowY = "auto"; // 启用垂直滚动条
document.body.style.overflowX = "clip"; // 水平滚动条保持不变
}
// 当视频元数据加载完成后执行以下操作
videoElementBanner.addEventListener("loadedmetadata", () => {
// 启用滚动
enableScroll();
// 隐藏加载图标
const loadingIcon = document.getElementById("loading-icon");
loadingIcon.style.display = "none";
const videoDuration = videoElementBanner.duration; // 视频总时长
const pixelsPerFrame = 20; // 每滚动20像素切换一帧视频
const frameCount = videoDuration * 60; // 视频的总帧数
// 计算总的滚动距离
const totalScrollDistance = (frameCount - 1) * pixelsPerFrame;
// 创建 ScrollTrigger 动画
gsapPart = gsap.timeline({
scrollTrigger: {
trigger: "#video-container", // 触发器元素
start: "top top", // 触发滚动的位置
end: () => `+=${totalScrollDistance}`, // 触发器结束位置
scrub: true, // 启用滚动擦除效果
pin: true, // 固定滚动元素
onUpdate: (self) => {
// 获取当前滚动位置
const scrollY = self.progress * totalScrollDistance;
// 计算当前帧的索引
let targetFrame = Math.floor(scrollY / pixelsPerFrame);
// 限制 targetFrame 在合法范围内
targetFrame = Math.min(frameCount - 1, Math.max(0, targetFrame));
// 计算当前帧对应的时间
const targetTime = (targetFrame / frameCount) * videoDuration;
// 更新视频的当前时间
if (!isNaN(targetTime) && isFinite(targetTime)) {
videoElementBanner.currentTime = targetTime;
}
},
},
});
});
</script>
这个功能的目的是提供一种交互式的方式来控制视频的播放,用户可以通过滚动页面来前进、后退,从而增强用户体验或展示创意视觉效果。
结论:
在本文中,我们已经展示了如何创建一个具有视频滚动控制功能的网页。这是一个强大的工具,可以用来提升网页设计的吸引力,并为用户提供更多的交互性。如果你希望在你的网站上增加类似的功能,只需按照本文提供的代码和说明进行操作即可。