Controla la velocidad de reproducción de vídeo en cualquier sitio
La mayoría de los reproductores de vídeo limitan la velocidad a 2x u ocultan el control por completo. El navegador no tiene ese límite. Una breve regla de JustZix te da un control de velocidad detallado en cada vídeo de la página, sin importar quién construyó el reproductor.
Por qué una regla supera a la interfaz del reproductor
El HTMLMediaElement nativo expone una propiedad playbackRate. La interfaz del reproductor es solo una piel encima de ella. Cuando fijas playbackRate directamente, esquivas la piel y hablas con el elemento. JustZix te permite adjuntar ese código a un patrón de URL para que se ejecute automáticamente cada vez que abres una página que coincide.
La receta mínima
Crea una regla JavaScript limitada a los sitios donde ves vídeos largos. Este fragmento fija cada vídeo a 1,5x y es seguro ejecutarlo más de una vez:
document.querySelectorAll('video').forEach(function (v) {
v.playbackRate = 1.5;
});
Eso funciona para los vídeos ya en el DOM. Muchos sitios cargan el reproductor después de la página, así que también quieres atrapar los vídeos que aparecen más tarde.
Atrapar los vídeos añadidos más tarde
Un MutationObserver vigila el documento y aplica tu velocidad a cualquier vídeo nuevo. Es defensivo: nunca lanza una excepción si un nodo no es un elemento.
(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 });
})();
Una sutileza: algunos reproductores reinician playbackRate cuando empieza un clip nuevo. Para sobrevivir a eso, escucha también los eventos ratechange y loadeddata y vuelve a aplicar tu valor.
document.addEventListener('loadeddata', function (e) {
var v = e.target;
if (v && v.tagName === 'VIDEO') { v.playbackRate = 1.5; }
}, true);
El tercer argumento true habilita la captura, así que el gestor se dispara aunque los eventos de medios no se propaguen.
Atajos de teclado y una insignia de velocidad
Ver tutoriales es más fácil cuando puedes ajustar la velocidad sin buscar un menú. Esta regla asigna las teclas de corchete para escalonar la velocidad y muestra una pequeña insignia en la esquina.
(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); }
});
})();
La insignia usa el z-index más alto que es práctico para que se mantenga visible sobre reproductores a pantalla completa, e ignora las pulsaciones de tecla mientras escribes en un campo de formulario.
Limitar la regla
- Coincide con patrones amplios como
*://*.example.com/*para un solo sitio, o un comodín para toda una clase de páginas. - Mantén una regla por sitio para poder dar a cada uno su propia velocidad por defecto.
- Desactiva una regla desde la ventana emergente si un reproductor se comporta mal, en lugar de borrarla.
Explora nuestros ejemplos listos para usar para una versión para copiar de esta regla, o descarga JustZix para empezar. Cuando termines con la velocidad, el siguiente paso es recuperar el botón de imagen en imagen — consulta añadir un botón de imagen en imagen a cualquier vídeo.
Valora este artículo
Sin valoraciones — sé el primero.