最近在做一個視頻播放器網站，需要用到CSS Video。但是我們發現，有些用戶可能會在觀看視頻時需要關閉聲音，但是卻不知道如何操作。于是我們又學習了一種新技能——如何給CSS Video添加打開和關閉聲音的功能。

/* 打開或關閉音量的 CSS */
/* 具體效果可以稍后自己進行調整*/
/* 音量icon的樣式 */
.video-volume-icon {
background-image: url('volume.svg');
background-size: cover;
width: 20px;
height: 20px;
}
/* 音量控制條 */
.video-volume-bar {
background-color: #ddd;
width: 100px;
height: 6px;
position: relative;
border-radius: 6px;
}
.video-volume-bar .video-volume-level {
background-color: #0077be;
height: 6px;
position: absolute;
top: 0;
left: 0;
border-radius: 6px;
}
/* 打開禁音按鈕的樣式 */
.muted-button {
cursor: pointer;
background-image: url('muted.svg');
background-size: cover;
width: 20px;
height: 20px;
margin-left: 20px;
}
.muted-button.muted {
background-image: url('unmuted.svg');
}
/* JS 代碼 */
const video = document.getElementById('video');
const volumeBar = document.querySelector('.video-volume-bar');
const volumeLevel = document.querySelector('.video-volume-level');
const mutedButton = document.querySelector('.muted-button');
function updateVolume(e) {
const volume = e.offsetX / volumeBar.clientWidth;
video.volume = volume;
volumeLevel.style.width = `${volume * 100}%`;
}
function toggleMuted() {
video.muted = !video.muted;
mutedButton.classList.toggle('muted', video.muted);
}
volumeBar.addEventListener('click', updateVolume);
mutedButton.addEventListener('click', toggleMuted);

以上就是我們給CSS Video添加打開和關閉聲音的方法。我們使用了CSS樣式來美化音量控制條和音量icon，并使用JavaScript代碼來控制視頻的音量和禁聲。通過這種方法，用戶可以根據自己的需要方便地打開或關閉視頻的聲音，提升了用戶體驗。