Todo empezó con Dragon Ball Z
Me puse a ver Dragon Ball Z por no sé ya cuántas veces, pero había algo que me molestaba un poco: Crunchyroll tiene la versión 4:3 del anime, así que al verlo a pantalla completa me dejaba franjas oscuras que no me agradan. Yo prefiero verlo de forma que ocupe toda la pantalla, así que me puse a investigar un poco qué podía hacer. Primero, lo que vi fue que el reproductor estaba incrustado con un iframe hacia un reproductor HTML, según pude comprobar con las herramientas de desarrollo.
El overlay oscuro, el que hace que el reproductor de Crunchyroll se vea atenuado, es un div vacío que solo tiene estilos. Esos estilos son el fondo transparente oscuro que crea esa capa que no me gusta. Además, hay otras cosas que no necesitamos contemplar, como la rueda de carga, que también podríamos quitar si quisiéramos.
<div class="" style="background-color: rgba(0, 0, 0, 0.2);"></div>
Es solo un div que, al abrirse los controles, que es el elemento velocity-controls-package, se activa y se mantiene hasta que se oculta. Sabiendo esto, lo que tenemos que hacer es ocultar ese div, es decir, ponerlo en modo hidden. Hay varios métodos para hacerlo, pero el que usaré es probablemente el que evita más fallos y cambios, ya que no depende del orden, describe qué es y no dónde está, y no depende de clases extrañas. Es usar lo siguiente:
#velocity-controls-package > div:not(:has(*)) {
visibility: hidden !important;
}
¿Por qué usar div:not(:has(*))? Porque esto significa que de todos los div que no tienen nada dentro, los oculta.
Con esto ya cumplimos el objetivo de ocultar ese molesto dim de Crunchyroll. Como yo uso Tampermonkey, creé un script para ese fin. Lo dejaré aquí abajo en el spoiler por si desean copiarlo y usarlo en su userscript favorito.
Código para Tampermonkey
// ==UserScript==
// @name Crunchyroll no dim
// @namespace https://www.takoyaki888.jp/post/arreglando-crunchyroll/
// @version 1.0
// @description DIM kirai
// @match https://static.crunchyroll.com/vilos-v2/web/vilos/player.html
// @grant none
// @run-at document-start
// ==/UserScript==
(function () {
'use strict';
const css = `
/* Overlay que oscurece el vídeo */
#velocity-controls-package > div:not(:has(*)) {
visibility: hidden !important;
}
`;
const style = document.createElement('style');
style.textContent = css;
document.documentElement.appendChild(style);
})();
Lo siguiente que quise hacer fue lograr que los videos 4:3 de Crunchyroll tuvieran tamaño 16:9. De esto no daré muchos detalles sobre cómo lo arreglé a mi gusto, ya que a muchas personas no les gusta cómo queda estirada la imagen en animes o juegos antiguos, pero yo lo prefiero mucho. Estuve investigando cómo hacerlo y encontré algo peculiar que no puedo dejar de mencionar: pude encontrar una forma de quitar el DRM al ver el video sin necesidad de hacer lo que ya todos saben, que es desactivar el acelerador de gráficos. Normalmente uso el navegador de ChatGPT, Atlas, y de momento este no tiene muchas opciones de configuración; de hecho, creo que ni acceso a flags tiene, y eso que está basado en Chromium, lo cual espero que agreguen pronto. Pero bueno, al descubrir eso ya no necesito desactivar el acelerador para poder tomar una captura de pantalla.
Después de arreglar lo de ver los videos en 16:9:
Imagináis cómo tomé la captura de pantalla :3. Y bueno, con lo que había descubierto no quería dejarlo solo en que pudiera ser un fallo de Crunchyroll, ya que podría usarlo en cualquier otro video con DRM, algo así como Netflix. Y claro, tenía que probarlo y verlo funcionar con el acelerador de gráficos activado, lo que me emocionó un poco:
Ver que era posible incluso capturarlo con OBS o cualquier capturadora me sorprendió. No creo ser la única en descubrirlo. No entiendo la razón de poner estas restricciones, ya que quien quiera, con un poco de tiempo, puede saltarse todas estas trabas; solo ponen obstáculos a quienes quisieran hacer capturas puntuales y compartirlas.
