Кнопка со слайдером для плавного изменения скорости воспроизведения видео на HDRezka
// ==UserScript==
// @name HDRezka Speed Toggle + Slider
// @namespace http://tampermonkey.net/
// @version 0.7
// @description Кнопка со слайдером для плавного изменения скорости воспроизведения видео на HDRezka
// @author T.Er
// @icon https://img.icons8.com/?size=100&id=MSyqQ3LgGhFt&format=png&color=000000
// @include /^https?:\/\/.*rezk.*\/.*$/
// @license MIT
// @grant none
// ==/UserScript==
(function() {
'use strict';
let isActive = false;
function addSpeedButtons() {
const forwardBtn = document.querySelector('.hc-player-control-forward');
//if (!controls || !forwardBtn) return;
const video = document.querySelector('video');
if (!video) return;
// ищем контейнер управления плеером
let controls = document.querySelector('.hc-player-control');
if (!controls) {
// если нет, создаём свой контейнер
controls = document.createElement('div');
controls.className = 'hc-player-control';
controls.style.display = 'flex';
controls.style.alignItems = 'center';
controls.style.justifyContent = 'flex-start';
controls.style.gap = '5px';
controls.style.fontSize = '11px';
controls.style.position = 'absolute';
controls.style.bottom = '55px';
controls.style.width = '60px';
controls.style.height = '35px';
controls.style.left = '10px';
controls.style.zIndex = 9999;
controls.style.background = 'rgba(23, 35, 34, 0.7)';
controls.style.padding = '0px 0px 0px 5px';
controls.style.borderRadius = '4px';
video.parentElement.appendChild(controls);
// обработка hover через JS
controls.addEventListener('mouseenter', () => {
controls.style.background = 'rgba(0, 173, 239, 0.7)';
});
controls.addEventListener('mouseleave', () => {
controls.style.background = 'rgba(23, 35, 34, 0.7)';
});
}
// // --- Существующая кнопка 1.15x ---
// if (!document.querySelector('.hc-player-control-speed115')) {
// const btn = document.createElement('div');
// btn.className = 'hc-player-control hc-player-control-speed115';
// btn.textContent = '1.15x';
// btn.style.width = '32px';
// btn.style.height = '35px';
// btn.style.fontSize = '11px';
// btn.style.display = 'flex';
// btn.style.alignItems = 'center';
// btn.style.justifyContent = 'center';
// btn.style.cursor = 'pointer';
// btn.title = 'Включить скорость 1.15';
// btn.addEventListener('click', () => {
// if (!isActive) {
// video.playbackRate = 1.15;
// btn.style.border = '2px solid #00AAEA';
// btn.textContent = '1.15x';
// btn.style.width = '32px';
// btn.style.height = '32px';
// btn.title = 'Включить скорость 1.00';
// } else {
// video.playbackRate = 1.0;
// btn.style.border = 'none';
// btn.textContent = '1.15x';
// btn.style.width = '32px';
// btn.style.height = '35px';
// }
// isActive = !isActive;
// });
// forwardBtn.insertAdjacentElement('afterend', btn);
// }
// --- Кнопка Speed с ползунком и отображением скорости ---
// проверяем, не добавлена ли кнопка
// проверяем, есть ли уже кнопка
let existingBtn = document.querySelector('.hc-player-control-speed-slider-btn');
if (existingBtn) {
return;
}
const sliderBtn = document.createElement('div');
sliderBtn.className = 'hc-player-control hc-player-control-speed-slider-btn';
sliderBtn.style.width = '50px';
sliderBtn.style.height = '35px';
sliderBtn.style.fontSize = '11px';
sliderBtn.style.display = 'flex';
sliderBtn.style.flexDirection = 'column';
sliderBtn.style.alignItems = 'center';
sliderBtn.style.justifyContent = 'center';
sliderBtn.style.cursor = 'pointer';
sliderBtn.style.position = 'relative';
sliderBtn.style.transition = 'opacity 0.3s';
// надпись Speed
const titleSpan = document.createElement('span');
titleSpan.textContent = 'Speed';
titleSpan.style.fontSize = '11px';
sliderBtn.appendChild(titleSpan);
// текущее значение скорости
const valueSpan = document.createElement('span');
valueSpan.textContent = video.playbackRate.toFixed(2) + 'x';
valueSpan.style.fontSize = '10px';
valueSpan.style.color = 'white';
sliderBtn.appendChild(valueSpan);
// контейнер для ползунка (над кнопкой)
const sliderContainer = document.createElement('div');
sliderContainer.style.position = 'absolute';
sliderContainer.style.bottom = '35px'; // над кнопкой
sliderContainer.style.left = '50%';
sliderContainer.style.transform = 'translateX(-50%)';
sliderContainer.style.padding = '5px';
//sliderContainer.style.background = 'rgba(0,0,0,0.2)';
sliderContainer.style.borderRadius = '4px';
sliderContainer.style.display = 'none';
sliderContainer.style.zIndex = 1000;
sliderContainer.style.display = 'flex';
sliderContainer.style.alignItems = 'center';
sliderContainer.style.gap = '5px';
const slider = document.createElement('input');
slider.type = 'range';
slider.min = 0.5;
slider.max = 3;
slider.step = 0.05;
slider.value = video.playbackRate;
slider.style.width = '100px';
slider.addEventListener('input', () => {
video.playbackRate = parseFloat(slider.value);
valueSpan.textContent = slider.value + 'x'; // обновляем надпись на кнопке
});
sliderContainer.appendChild(slider);
sliderBtn.appendChild(sliderContainer);
// показать/спрятать сам ползунок по клику
sliderBtn.addEventListener('click', () => {
sliderContainer.style.display = sliderContainer.style.display === 'none' ? 'flex' : 'none';
});
// --- логика автоскрытия кнопки ---
let hideTimer = null;
function resetHideTimer() {
clearTimeout(hideTimer);
hideTimer = setTimeout(() => {
sliderBtn.style.opacity = '0';
controls.style.background = 'transparent'
sliderBtn.style.pointerEvents = 'none'; // чтобы не мешал
}, 2000);
}
// показывать кнопку при движении мыши над плеером
video.parentElement.addEventListener('mousemove', () => {
sliderBtn.style.opacity = '1';
sliderBtn.style.pointerEvents = 'auto';
resetHideTimer();
});
// если кнопка уже есть в DOM
if (forwardBtn) {
sliderBtn.remove();
forwardBtn.insertAdjacentElement('afterend', sliderBtn);
} else {
controls.appendChild(sliderBtn);
}
}
const observer = new MutationObserver(() => addSpeedButtons());
observer.observe(document.body, { childList: true, subtree: true });
})();