接下來，在 CSS 樣式中，我們可以通過設(shè)置 `.video-container` 的初始樣式來實現(xiàn)視頻的折疊效果。例如，我們可以將其高度設(shè)置為一個較小的值，如 200px，并使用 `overflow: hidden` 來隱藏超出部分的內(nèi)容。同時，我們還可以為播放按鈕添加樣式，使其在鼠標(biāo)懸停時顯示為不同的狀態(tài)，以提示用戶可以點擊播放視頻。例如：

```css

.video-container {

height: 200px;

overflow: hidden;

position: relative;

}

.video-play-button {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

background-color: #000;

color: #fff;

padding: 10px 20px;

cursor: pointer;

opacity: 0;

transition: opacity 0.3s ease;

}

.video-container:hover.video-play-button {

opacity: 1;

}

```

在上述 CSS 代碼中，我們通過設(shè)置 `.video-container` 的高度和溢出屬性來實現(xiàn)視頻的折疊效果。同時，我們將播放按鈕的位置設(shè)置為容器的中心，并使用 `opacity` 屬性來控制其在初始狀態(tài)下的透明度，使其不可見。當(dāng)用戶將鼠標(biāo)懸停在視頻容器上時，通過 CSS 的過渡效果，播放按鈕的透明度將逐漸變?yōu)?1，顯示出來。

在 JavaScript 中，我們可以使用事件監(jiān)聽器來實現(xiàn)播放按鈕的點擊事件和視頻的展開與折疊效果。例如，我們可以為播放按鈕添加點擊事件監(jiān)聽器，當(dāng)用戶點擊播放按鈕時，獲取視頻播放器的引用，并使用 `play()` 方法來播放視頻。同時，我們還可以通過設(shè)置視頻播放器的 `muted` 屬性來控制視頻的靜音狀態(tài)，以及使用 `height` 屬性來控制視頻容器的高度，以實現(xiàn)視頻的展開與折疊效果。例如：

```javascript

const videoContainer = document.querySelector('.video-container');

const videoPlayer = document.getElementById('video-player');

const playButton = document.querySelector('.video-play-button');

playButton.addEventListener('click', () => {

if (videoPlayer.paused) {

videoPlayer.play();

} else {

videoPlayer.pause();

}

});

videoPlayer.addEventListener('ended', () => {

videoPlayer.currentTime = 0;

videoPlayer.pause();

});

videoContainer.addEventListener('click', () => {

if (videoContainer.classList.contains('expanded')) {

videoContainer.classList.remove('expanded');

videoContainer.style.height = '200px';

} else {

videoContainer.classList.add('expanded');

videoContainer.style.height = 'auto';

}

});

```

在上述 JavaScript 代碼中，我們首先獲取了視頻容器、視頻播放器和播放按鈕的引用。然后，為播放按鈕添加了點擊事件監(jiān)聽器，當(dāng)用戶點擊播放按鈕時，根據(jù)視頻的播放狀態(tài)來切換視頻的播放和暫停。同時，為視頻播放器添加了 `ended` 事件監(jiān)聽器，當(dāng)視頻播放結(jié)束時，將視頻的當(dāng)前時間重置為 0，并暫停視頻。為視頻容器添加了點擊事件監(jiān)聽器，當(dāng)用戶點擊視頻容器時，根據(jù)視頻容器的類名來判斷是否已經(jīng)展開，如果已經(jīng)展開，則將其類名移除，并將高度設(shè)置為 200px；如果未展開，則將類名添加，并將高度設(shè)置為自動，以實現(xiàn)視頻的展開與折疊效果。

通過以上的 HTML、CSS 和 JavaScript 代碼組合，我們可以輕松地實現(xiàn)網(wǎng)頁視頻的折疊式切換效果。這種效果不僅能夠提升網(wǎng)頁的交互性和用戶體驗，還能夠根據(jù)不同的屏幕尺寸和設(shè)備條件進行自適應(yīng)調(diào)整，確保視頻在各種環(huán)境下都能夠得到良好的展示。當(dāng)然，在實際的開發(fā)過程中，我們還可以根據(jù)具體的需求和設(shè)計風(fēng)格對代碼進行進一步的優(yōu)化和擴展，以滿足不同項目的要求。