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

前言

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

video API

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

简单使用

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

bash 复制代码
<video controls>
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
</video>

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

视频属性

  • 视频持续时间:这将返回视频的总持续时间(以秒为单位)。
ini 复制代码
const videoDuration = video.duration;
  • 控制自动播放:加载后,可以获取或设置视频是否应自动开始播放。
ini 复制代码
const AutoplayEnabled = video.autoplay;  // 获取
video.autoplay = true;  // 设置
  • 获取和设置音量:获取当前音量并设置它(从 0.0 到 1.0)。
ini 复制代码
const currentVolume = video.volume;
video.volume = 0.75;
  • 当前时间:通过操作属性跳转到视频中的特定点currentTime
ini 复制代码
video.currentTime = 30;   // 将视频跳转到30s的位置

currentTime是本文滚动效果的关键属性,因为它可以链接到滚动值等属性。

视频方法

  • 播放和暂停:使用这些功能,可以播放和暂停视频。例如,这些功能可以链接到自定义按钮。
css 复制代码
video.play(); 
video.pause();
  • 加载:可以使用此方法重新加载视频。
css 复制代码
video.load();
  • 操纵控件:还可以通过 JavaScript 操纵控件属性。
less 复制代码
video.removeAttribute("controls");

视频事件监听器

  • timeupdate:当前播放位置改变时触发。
  • ended:视频结束时触发。
  • loadedmetadata:加载元数据(例如持续时间或音量)时触发。
  • progress:当浏览器加载视频数据时触发。

了解完以上视频相关API,我们就可以来实现各种视频相关效果

视频可见时自动播放

比如网站上有一个视频想要自动播放,但需要滚动到该视频。如果我们能够检测到它何时进入用户的视图,我们就可以直接启动它,而不是在它不可见时播放它。

ini 复制代码
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来实现

ini 复制代码
const video = document.querySelector('video');
const container = document.querySelector('.container');
const speed = 250 // 播放速度
video.addEventListener('loadedmetadata', () => {
  container.style.height = video.duration * speed + 'px';
})

计算滚动位置换算视频进度

ini 复制代码
const scrollY = window.scrollY;
​
const height = document.documentElement.scrollHeight - window.innerHeight;
const percentage = (scrollY / height);

使视频播放与滚动进度同步

使用计算出的百分比来设置currentTime视频的播放时间

ini 复制代码
video.currentTime = video.duration * percentage;

平滑效果

使用requestAnimationFrame功能来增强滚动过程中视频播放的平滑度。

ini 复制代码
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);
};
相关推荐
就爱瞎逛14 分钟前
TailWind CSS Intellisense 插件在VSCode 上不生效
前端·css·vscode·tailwind
柚子81617 分钟前
sibling-index:我用这个画时钟表盘
前端·css
UI设计和前端开发从业者31 分钟前
UI前端大数据处理策略优化:基于云计算的数据存储与计算
前端·ui·云计算
前端小巷子1 小时前
Web开发中的文件上传
前端·javascript·面试
翻滚吧键盘2 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹2 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
杨进军2 小时前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW2 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字3 小时前
Kotlin lazy 委托的底层实现原理
前端
爱分享的程序员3 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js