前言

對于網(wǎng)頁而言，圖片與視頻是視覺吸引的關(guān)鍵要素，然而，僅僅依靠手動(dòng)控制的靜態(tài)圖像和視頻可能會(huì)變得單調(diào)。本文打破了常規(guī)思維，探討了如何將視頻與頁面滾動(dòng)完美集成。

video API

在這之前，我們需要先來了解視頻的相關(guān)屬性及方法。

簡單使用

以下是使用 HTML 元素展示視頻的簡單方法

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

這里最重要的屬性是controls， 該屬性允許用戶播放/暫停和控制其他視頻元素。如果刪除此選項(xiàng)，用戶將無法手動(dòng)控制視頻。該<video>元素可以包含多個(gè)<source>元素，以便可以根據(jù)查看站點(diǎn)的瀏覽器加載不同的格式。

視頻屬性

• 視頻持續(xù)時(shí)間：這將返回視頻的總持續(xù)時(shí)間（以秒為單位）。

const videoDuration = video.duration;

• 控制自動(dòng)播放：加載后，可以獲取或設(shè)置視頻是否應(yīng)自動(dòng)開始播放。

const AutoplayEnabled = video.autoplay;  // 獲取
video.autoplay = true;  // 設(shè)置

• 獲取和設(shè)置音量：獲取當(dāng)前音量并設(shè)置它（從 0.0 到 1.0）。

const currentVolume = video.volume;
video.volume = 0.75;

• 當(dāng)前時(shí)間：通過操作屬性跳轉(zhuǎn)到視頻中的特定點(diǎn)currentTime。

video.currentTime = 30;   // 將視頻跳轉(zhuǎn)到30s的位置

該currentTime是本文滾動(dòng)效果的關(guān)鍵屬性，因?yàn)樗梢枣溄拥綕L動(dòng)值等屬性。

視頻方法

• 播放和暫停：使用這些功能，可以播放和暫停視頻。例如，這些功能可以鏈接到自定義按鈕。

video.play(); 
video.pause();

• 加載：可以使用此方法重新加載視頻。

video.load();

• 操縱控件：還可以通過 JavaScript 操縱控件屬性。

video.removeAttribute("controls");

視頻事件監(jiān)聽器

• timeupdate：當(dāng)前播放位置改變時(shí)觸發(fā)。
• ended：視頻結(jié)束時(shí)觸發(fā)。
• loadedmetadata：加載元數(shù)據(jù)（例如持續(xù)時(shí)間或音量）時(shí)觸發(fā)。
• progress：當(dāng)瀏覽器加載視頻數(shù)據(jù)時(shí)觸發(fā)。

了解完以上視頻相關(guān)API，我們就可以來實(shí)現(xiàn)各種視頻相關(guān)效果

視頻可見時(shí)自動(dòng)播放

比如網(wǎng)站上有一個(gè)視頻想要自動(dòng)播放，但需要滾動(dòng)到該視頻。如果我們能夠檢測到它何時(shí)進(jìn)入用戶的視圖，我們就可以直接啟動(dòng)它，而不是在它不可見時(shí)播放它。

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

圖片

使用滾動(dòng)值播放視頻

這里才是本文的重點(diǎn)，當(dāng)用戶滾動(dòng)時(shí)播放視頻。這將向前和向后進(jìn)行播放。這種效果很常見，可以產(chǎn)生 3D 模態(tài)在滾動(dòng)上移動(dòng)的錯(cuò)覺。

計(jì)算滾動(dòng)條

為了實(shí)現(xiàn)滾動(dòng)效果，我們需要?jiǎng)?chuàng)建一個(gè)反映視頻長度的滾動(dòng)條，這里我們可以使用上面提到的APIloadedmetadata來實(shí)現(xiàn)

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

計(jì)算滾動(dòng)位置換算視頻進(jìn)度

const scrollY = window.scrollY;

const height = document.documentElement.scrollHeight - window.innerHeight;
const percentage = (scrollY / height);

使視頻播放與滾動(dòng)進(jìn)度同步

使用計(jì)算出的百分比來設(shè)置currentTime視頻的播放時(shí)間

video.currentTime = video.duration * percentage;

平滑效果

使用requestAnimationFrame功能來增強(qiáng)滾動(dòng)過程中視頻播放的平滑度。

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

圖片