前言
对于网页而言,图片与视频是视觉吸引的关键要素,然而,仅仅依靠手动控制的静态图像和视频可能会变得单调。本文打破了常规思维,探讨了如何将视频与页面滚动完美集成。
video API
在这之前,我们需要先来了解视频的相关属性及方法。
简单使用
以下是使用 HTML 元素展示视频的简单方法
这里最重要的属性是controls, 该属性允许用户播放/暂停和控制其他视频元素。如果删除此选项,用户将无法手动控制视频。该元素可以包含多个元素,以便可以根据查看站点的浏览器加载不同的格式。
视频属性
- 视频持续时间:这将返回视频的总持续时间(以秒为单位)。
const videoDuration = video.duration;
- 控制自动播放:加载后,可以获取或设置视频是否应自动开始播放。
const AutoplayEnabled = video.autoplay; // 获取
video.autoplay = true; // 设置
- 获取和设置音量:获取当前音量并设置它(从 0.0 到 1.0)。
const currentVolume = video.volume;
video.volume = 0.75;
- 当前时间:通过操作属性跳转到视频中的特定点currentTime。
video.currentTime = 30; // 将视频跳转到30s的位置
该currentTime是本文滚动效果的关键属性,因为它可以链接到滚动值等属性。
视频方法
- 播放和暂停:使用这些功能,可以播放和暂停视频。例如,这些功能可以链接到自定义按钮。
video.play();
video.pause();
- 加载:可以使用此方法重新加载视频。
video.load();
- 操纵控件:还可以通过 JavaScript 操纵控件属性。
video.removeAttribute("controls");
视频事件监听器
- timeupdate:当前播放位置改变时触发。
- ended:视频结束时触发。
- loadedmetadata:加载元数据(例如持续时间或音量)时触发。
- progress:当浏览器加载视频数据时触发。
了解完以上视频相关API,我们就可以来实现各种视频相关效果
视频可见时自动播放
比如网站上有一个视频想要自动播放,但需要滚动到该视频。如果我们能够检测到它何时进入用户的视图,我们就可以直接启动它,而不是在它不可见时播放它。
const video = document.querySelector('video');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
video.play();
} else {
video.pause();
}
})
}, {
threshold: 0.5
});
observer.observe(video);
图片
使用滚动值播放视频
这里才是本文的重点,当用户滚动时播放视频。这将向前和向后进行播放。这种效果很常见,可以产生 3D 模态在滚动上移动的错觉。
计算滚动条
为了实现滚动效果,我们需要创建一个反映视频长度的滚动条,这里我们可以使用上面提到的APIloadedmetadata来实现
const video = document.querySelector('video');
const container = document.querySelector('.container');
const speed = 250 // 播放速度
video.addEventListener('loadedmetadata', () => {
container.style.height = video.duration * speed + 'px';
})
计算滚动位置换算视频进度
const scrollY = window.scrollY;
const height = document.documentElement.scrollHeight - window.innerHeight;
const percentage = (scrollY / height);
使视频播放与滚动进度同步
使用计算出的百分比来设置currentTime视频的播放时间
video.currentTime = video.duration * percentage;
平滑效果
使用requestAnimationFrame功能来增强滚动过程中视频播放的平滑度。
const playVideo = () => {
const scrollY = window.scrollY;
const height = document.documentElement.scrollHeight - window.innerHeight;
const percentage = (scrollY / height);
video.currentTime = video.duration * percentage;
window.requestAnimationFrame(playVideo);
};
图片