滾動視頻新玩法，打造獨特的滾動視頻體驗
前言
對于網(wǎng)頁而言，圖片與視頻是視覺吸引的關鍵要素，然而，僅僅依靠手動控制的靜態(tài)圖像和視頻可能會變得單調。本文打破了常規(guī)思維，探討了如何將視頻與頁面滾動完美集成。
video API
在這之前，我們需要先來了解視頻的相關屬性及方法。
簡單使用
以下是使用 HTML 元素展示視頻的簡單方法
<video controls>
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webm" />
</video>這里最重要的屬性是controls， 該屬性允許用戶播放/暫停和控制其他視頻元素。如果刪除此選項，用戶將無法手動控制視頻。該<video>元素可以包含多個<source>元素，以便可以根據(jù)查看站點的瀏覽器加載不同的格式。
視頻屬性
- 視頻持續(xù)時間：這將返回視頻的總持續(xù)時間（以秒為單位）。
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");視頻事件監(jiān)聽器
- timeupdate：當前播放位置改變時觸發(fā)。
- ended：視頻結束時觸發(fā)。
- loadedmetadata：加載元數(shù)據(jù)（例如持續(xù)時間或音量）時觸發(fā)。
- progress：當瀏覽器加載視頻數(shù)據(jù)時觸發(fā)。
了解完以上視頻相關API，我們就可以來實現(xiàn)各種視頻相關效果
視頻可見時自動播放
比如網(wǎng)站上有一個視頻想要自動播放，但需要滾動到該視頻。如果我們能夠檢測到它何時進入用戶的視圖，我們就可以直接啟動它，而不是在它不可見時播放它。
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);
圖片
使用滾動值播放視頻
這里才是本文的重點，當用戶滾動時播放視頻。這將向前和向后進行播放。這種效果很常見，可以產(chǎn)生 3D 模態(tài)在滾動上移動的錯覺。
計算滾動條
為了實現(xiàn)滾動效果，我們需要創(chuàng)建一個反映視頻長度的滾動條，這里我們可以使用上面提到的APIloadedmetadata來實現(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';
})計算滾動位置換算視頻進度
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);
};
圖片
