tholinka / crunchyroll-html5 Archived

Realmente no nos gusta flash y queremos matarlo lo antes posible. Sin embargo, actualmente no hay reproductor HTML5 disponible para Crunchyroll sin tener una suscripción. Así que esta es la respuesta.

Características

• Un reproductor HTML5 completo que se parece mucho al reproductor de YouTube.
• Cambia la calidad del vídeo en el reproductor.
• Cambiar los subtítulos en el reproductor (usando libass con JavascriptSubtitlesOctopus).
• Controlar la velocidad.
• Reproducir automáticamente el siguiente vídeo.
• Accesos directos (ver lista de accesos directos)

Descargar

Extensión Chrome: https://chrome.google.com/webstore/detail/crunchyroll-html5/ihegfgnkffeibpmnajnoiemkcmlbmhmi

Addon de Firefox: https://addons.mozilla.org/en-US/firefox/addon/crunchyroll-html5-unofficial/

Capturas de pantalla

Motor de subtítulos

El navegador es realmente malo en la visualización de subtítulos por lo que tuve que encontrar una bibliotecaque es capaz de renderizar subtítulos SSA/ASS. He mirado en sólo el uso de WebVTT, peroChrome no era realmente capaz de renderizarlos sin una gran caja negra alrededor de ellos.

Así que he decidido en el uso deJavascriptSubtitlesOctopus, que es un proyecto emscripten quemakes libass trabajo en el navegador con fontsupport. Sin embargo, he tenido que hacer algunos cambios en el proyecto para permitir cargar dinámicamente el archivodefault.ttff y el archivofonts.conffile. También he implementado una manera de cambiar la pista de subtítulos sin necesidad de reiniciar el WebWorker que está ejecutando el motor.

Todas las modificaciones se pueden encontrar aquí.

Construir

Construir este proyecto resultará en un archivo crunchyroll-html5.user.js en el directorio/dist. Para que se ejecute en Crunchyroll es necesario añadir una cabecera auserscript que permita la ejecución del script enhttp://www.crunchyroll.com/*. Actualmente no he hecho que sea capaz de construir para cada navegador o userscript.

Antes de construir asegúrese de que ha instalado Node.jsand Yarn (opcional). Después de que se requiere para instalar las dependencias del proyecto a través de cualquiera de Yarn.

La construcción se realiza mediante la ejecución de la secuencia de comandos build:

$ yarn build

Empaquetado

Puedes empaquetar el addon de Firefox legado como firefox.xpi (sin firmar ya que no es posible firmarlo) y la extensión web como webextension.zip(firmable ver más abajo).

$ yarn package:firefox$ yarn package:webextension

Firma de Firefox

Puedes firmar la Extensión Web. Sin embargo, necesita una clave de API y un secreto de API para poder firmar la Extensión Web (puede obtener uno aquí).Si deja el ID de la extensión vacío se generará uno nuevo. Puede utilizar el ID generado en el futuro para actualizar la extensión en lugar de crear nuevas extensiones cada actualización.

$ yarn sign:webextension --key <API KEY> --secret <API SECRET> --id <ID>

TODO

• Añadir soporte para el seguimiento del progreso
  • Chrunchyroll
    • Seguimiento de los episodios vistos
    • Utilizar la función de reanudación de Crunchyrolls.
  • Kitsu
    • Seguimiento de episodios vistos
  • MyAnimeList
    • Seguimiento de episodios vistos
  • Local
    • Seguimiento de episodios vistos
    • Seguimiento de lo que has visto en un vídeo.
    • Reanudar los vídeos que aún no has visto completamente.
  • …
• Añadir la opción de cambiar los subtítulos a otros idiomas. Actualmente, sólo se muestra el subtítulo predeterminado (en la mayoría de los casos será el inglés).
• Añadir más fuentes. Actualmente, sólo Arial está disponible. Debería ser bastante fácil, pero hay que hacer algunas pruebas para esto.
• Considere la posibilidad de mover la selección de la calidad en el reproductor.
• Estudie la posibilidad de añadir soporte para Chromecast.
• Añadir una pantalla de finalización para indicar que el usuario ha terminado el episodio actual y tal vez ir automáticamente al siguiente episodio.
• Agregar múltiples versiones de este proyecto para los usuarios de secuencias de comandos, Chrome, Firefox y más.
• Agregar una manera para que el jugador para recordar las opciones de usuario como lo alto o bajo el volumen es.
• Intentar reducir el tamaño del código en el userscript.

Bibliotecas principales

• hls.js
• JavascriptSubtitlesOctopus