Steruj prędkością odtwarzania wideo na dowolnej stronie
Większość odtwarzaczy wideo ogranicza prędkość do 2x lub całkowicie ukrywa kontrolkę. Przeglądarka nie ma tego limitu. Krótka reguła JustZix daje ci precyzyjną kontrolę prędkości nad każdym filmem na stronie, niezależnie od tego, kto zbudował odtwarzacz.
Dlaczego reguła bije UI odtwarzacza
Natywny HTMLMediaElement udostępnia właściwość playbackRate. Chrome odtwarzacza to tylko skórka na jego wierzchu. Gdy ustawiasz playbackRate bezpośrednio, omijasz skórkę i rozmawiasz z elementem. JustZix pozwala przypiąć ten kod do wzorca URL, więc działa automatycznie za każdym razem, gdy otwierasz pasującą stronę.
Minimalny przepis
Utwórz regułę JavaScript ograniczoną do stron, gdzie oglądasz długie filmy. Ten fragment ustawia każdy film na 1,5x i jest bezpieczny do uruchomienia więcej niż raz:
document.querySelectorAll('video').forEach(function (v) {
v.playbackRate = 1.5;
});
To działa dla filmów już w DOM. Wiele stron ładuje odtwarzacz po stronie, więc chcesz też złapać filmy, które pojawiają się później.
Łapanie filmów dodanych później
MutationObserver obserwuje dokument i stosuje twoją prędkość do każdego nowego filmu. Jest defensywny: nigdy nie rzuca błędu, jeśli węzeł nie jest elementem.
(function () {
var target = 1.5;
function apply(root) {
var list = root.querySelectorAll ? root.querySelectorAll('video') : [];
list.forEach(function (v) { v.playbackRate = target; });
}
apply(document);
var obs = new MutationObserver(function (records) {
records.forEach(function (rec) {
rec.addedNodes.forEach(function (n) {
if (n.nodeType === 1) {
if (n.tagName === 'VIDEO') { n.playbackRate = target; }
else { apply(n); }
}
});
});
});
obs.observe(document.documentElement, { childList: true, subtree: true });
})();
Jedna subtelność: niektóre odtwarzacze resetują playbackRate, gdy zaczyna się nowy klip. Aby to przetrwać, nasłuchuj też zdarzeń ratechange i loadeddata i ponownie zastosuj swoją wartość.
document.addEventListener('loadeddata', function (e) {
var v = e.target;
if (v && v.tagName === 'VIDEO') { v.playbackRate = 1.5; }
}, true);
Trzeci argument true włącza przechwytywanie, więc procedura obsługi uruchamia się, mimo że zdarzenia mediów nie propagują w górę.
Skróty klawiszowe i plakietka prędkości
Oglądanie poradników jest łatwiejsze, gdy możesz dostroić prędkość bez polowania na menu. Ta reguła przypisuje klawisze nawiasów do zmiany prędkości i pokazuje małą plakietkę w rogu.
(function () {
var speed = 1;
var badge = document.createElement('div');
badge.style.cssText = 'position:fixed;top:8px;right:8px;z-index:2147483647;'
+ 'background:#000;color:#fff;font:600 13px sans-serif;'
+ 'padding:4px 8px;border-radius:6px;opacity:0;transition:opacity .3s';
document.body.appendChild(badge);
function setSpeed(next) {
speed = Math.min(5, Math.max(0.25, Math.round(next * 100) / 100));
document.querySelectorAll('video').forEach(function (v) {
v.playbackRate = speed;
});
badge.textContent = speed + 'x';
badge.style.opacity = '1';
clearTimeout(badge._t);
badge._t = setTimeout(function () { badge.style.opacity = '0'; }, 1200);
}
document.addEventListener('keydown', function (e) {
if (e.target && /INPUT|TEXTAREA/.test(e.target.tagName)) { return; }
if (e.key === ']') { setSpeed(speed + 0.25); }
if (e.key === '[') { setSpeed(speed - 0.25); }
if (e.key === '\\') { setSpeed(1); }
});
})();
Plakietka używa najwyższego praktycznego z-index, więc pozostaje widoczna nad pełnoekranowymi odtwarzaczami, i ignoruje naciskanie klawiszy, gdy piszesz w polu formularza.
Ograniczanie reguły
- Dopasuj szerokie wzorce typu
*://*.example.com/*dla pojedynczej strony lub symbol wieloznaczny dla całej klasy stron. - Trzymaj jedną regułę na stronę, abyś mógł nadać każdej własną domyślną prędkość.
- Wyłącz regułę z popupu, jeśli odtwarzacz źle się zachowuje, zamiast ją usuwać.
Przejrzyj nasze gotowe przykłady, aby zdobyć gotową do skopiowania wersję tej reguły, lub pobierz JustZix, aby zacząć. Gdy skończysz z prędkością, kolejnym krokiem jest odzyskanie przycisku obraz w obrazie — zobacz dodaj przycisk obraz w obrazie do dowolnego wideo.
Oceń ten wpis
Brak ocen — oceń jako pierwszy.