1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
| const btnMute = document.querySelector('.btn-mute');
const btnMuteIcon = btnMute.querySelector('.fa');
const btnPlay = document.querySelector('.btn-play');
const btnPlayIcon = btnPlay.querySelector('.fa');
const videoElement = document.querySelector('.video-element');
// Mute the video
const muteVideo = () => {
if (videoElement.muted) {
videoElement.muted = false;
btnMuteIcon.classList.remove('fa-volume-up');
btnMuteIcon.classList.add('fa-volume-off');
} else {
videoElement.muted = true;
btnMuteIcon.classList.remove('fa-volume-off');
btnMuteIcon.classList.add('fa-volume-up');
}
}
// Play / Pause the video
const playPauseVideo = () => {
if (videoElement.paused) {
videoElement.play();
btnPlayIcon.classList.remove('fa-play');
btnPlayIcon.classList.add('fa-pause');
} else {
videoElement.pause();
btnPlayIcon.classList.remove('fa-pause');
btnPlayIcon.classList.add('fa-play');
}
}
// Event listeners
btnMute.addEventListener('click', muteVideo, false);
videoElement.addEventListener('ended', () => {
btnPlay.setAttribute('hidden', 'true');
btnReset.removeAttribute('hidden');
}, false); |
Partager