滚动视频新玩法，打造独特的滚动视频体验

前言

对于网页而言，图片与视频是视觉吸引的关键要素，然而，仅仅依靠手动控制的静态图像和视频可能会变得单调。本文打破了常规思维，探讨了如何将视频与页面滚动完美集成。

video API

在这之前，我们需要先来了解视频的相关属性及方法。

简单使用

以下是使用 HTML 元素展示视频的简单方法

<video controls>
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
</video>

这里最重要的属性是controls， 该属性允许用户播放/暂停和控制其他视频元素。如果删除此选项，用户将无法手动控制视频。该<video>元素可以包含多个<source>元素，以便可以根据查看站点的浏览器加载不同的格式。

视频属性

• 视频持续时间：这将返回视频的总持续时间（以秒为单位）。

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);
};