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

前言

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

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);
};
相关推荐
我是天龙_绍20 小时前
Easing 曲线 easings.net
前端
知识分享小能手20 小时前
微信小程序入门学习教程,从入门到精通,电影之家小程序项目知识点详解 (17)
前端·javascript·学习·微信小程序·小程序·前端框架·vue
訾博ZiBo20 小时前
React组件复用导致的闪烁问题及通用解决方案
前端
Dever20 小时前
记一次 CORS 深水坑:开启 withCredentials 后Response headers 只剩 content-type
前端·javascript
临江仙45520 小时前
流式 Markdown 渲染在 AI 应用中的应用探秘:从原理到优雅实现
前端·vue.js
Hilaku20 小时前
为什么我开始减少逛技术社区,而是去读非技术的书?
前端·javascript·面试
starxg20 小时前
bkhtmltopdf - 高性能 HTML 转 PDF 工具(代替 wkhtmltopdf)
java·pdf·html·wkhtmltopdf·htmltopdf
m0_7280331320 小时前
JavaWeb——(web.xml)中的(url-pattern)
xml·前端
猪哥帅过吴彦祖20 小时前
第 8 篇:更广阔的世界 - 加载 3D 模型
前端·javascript·webgl
七月十二20 小时前
[Js]使用highlight.js高亮vue代码
前端