Нужен скрипт регуляции громкости видео и паузы
Есть input для регуляции скорости восспроизвидения видео
<input type="range" class="form-range range" value="1" min="0.01" max="5" step="0.01" id="snipsnapp_speed_control">
// Контроль скорости
document.querySelector('#snipsnapp_speed_control').addEventListener('input', function(){
if(document.querySelector('video') !== null){
document.querySelector('video').playbackRate = this.value;
}
})
Проблема в том, что когда фокус наведен на этот input, а не на видео, то нельзя регулировать громкость видео клавишами вверх и вниз, а также нельзя пробелом ставить на паузу и снимать с паузы.
Я скрипты писать не умею, только адаптировать те которые нахожу в сети. Пробовал прицепить к событию нажатия кнопки (то что снизу) разные скрипты, но ничего не сработало.
else if (event.code === "ArrowDown") {
...
}
Может Вы подскажете простое решение на js или jquery, что вставить туда где три точки, чтобы убавлять/повышать громкость на 10% от абсолютной, ну и с паузой/воспроизведением?
Ответы (1 шт):
Вот вам решение:
var videoElement = document.querySelector('video')
var currentVolume = 100
videoElement.addEventListener('keydown', e => {
e.preventDefault()
})
window.addEventListener('keydown', e => {
switch (e.code) {
case 'Space':
videoElement[videoElement.paused ? 'play' : 'pause']()
break;
case 'ArrowDown':
currentVolume -= 10
setVolume()
break
case 'ArrowUp':
currentVolume += 10
setVolume()
break
}
})
function setVolume() {
currentVolume = currentVolume > 100
? 100
: currentVolume < 0
? 0
: currentVolume
videoElement.volume = currentVolume * 1 / 100
}<video src="https://audio-video.gnu.org/video/short--undated--rms--free-software-four-freedoms.ogv" controls=""></video>
<input type="range" value="50" max="100" min="0">Объяснение:
Сначала объявляем переменные с самим элементом и текущим уровнем громкости, далее убираем все стандартные события нажатия клавиш методом preventDefault, далее проверяем какая клавиша была нажата, если пробел, делаем проверку, ставить на паузу видео или нет, если стрелка вниз, тогда опускаем громкость на 10%, если вверх поднимаем.
Функция setVolume:
Если громкость более 100%, ставим её на 100, если меньше 0 тогда ставим 0, после, по такой формуле N * 1 / 100 (Пример: 85 * 1 / 100 === 0.85) получаем громкость для видео в нужном нам формате.