tholinka / crunchyroll-html5 Archived

von

Latest release Greenkeeper badge

Wir mögen Flash wirklich nicht und wollen es so schnell wie möglich loswerden. Allerdings gibt es derzeit keinen HTML5-Player für Crunchyroll, ohne ein Abonnement zu haben. Dies ist also die Antwort.

Funktionen

  • Ein vollwertiger HTML5-Player, der dem YouTube-Player sehr ähnlich sieht und sich auch so anfühlt.
  • Wechsel der Videoqualität im Player.
  • Untertitel im Player ändern (unter Verwendung von libass mit JavascriptSubtitlesOctopus).
  • Geschwindigkeitsregler.
  • Automatische Wiedergabe des nächsten Videos.
  • Kurzbefehle (siehe Liste der Kurzbefehle)

Download

Chrome-Erweiterung: https://chrome.google.com/webstore/detail/crunchyroll-html5/ihegfgnkffeibpmnajnoiemkcmlbmhmi

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

Screenshots

Vorschau

Untertitel-Engine

Der Browser ist wirklich schlecht bei der Anzeige von Untertiteln, also musste ich eine Bibliothek finden, die in der Lage ist, SSA/ASS-Untertitel darzustellen. Ich habe in nur mit WebVTT sah, aberChrome war nicht wirklich in der Lage, sie ohne eine große schwarze Box um sie herum zu rendern.

So habe ich auf mitJavascriptSubtitlesOctopus, die ein emscripten Projekt, das macht libass Arbeit im Browser mit fontsupport ist entschieden. Ich musste jedoch einige Änderungen an dem Projekt vornehmen, um das dynamische Laden der Dateidefault.ttffile und der Dateifonts.conffile zu ermöglichen. Außerdem habe ich eine Möglichkeit implementiert, die Untertitelspur zu ändern, ohne dass der WebWorker, der die Engine ausführt, neu gestartet werden muss.

Alle Änderungen sind hier zu finden.

Build

Die Erstellung dieses Projekts führt zu einer crunchyroll-html5.user.js-Datei im Verzeichnis/dist. Um es auf Crunchyroll zum Laufen zu bringen, muss man einen auserscript-Header voranstellen, der die Skriptausführung aufhttp://www.crunchyroll.com/* ermöglicht. Ich habe es zur Zeit nicht in der Lage gemacht, für jeden Browser oder jedes Benutzerskript zu bauen.

Vor dem Bauen muss man sicherstellen, dass man Node.js und Yarn (optional) installiert hat. Danach müssen Sie die Projektabhängigkeiten entweder über Yarn installieren.

Die Erstellung erfolgt durch Ausführen des Skripts build:

$ yarn build

Paketierung

Sie können das Legacy-Firefox-Addon als firefox.xpi (unsigniert, da es nicht mehr signiert werden kann) und die Web-Erweiterung als webextension.zip (signierbar, siehe unten) paketieren.

$ yarn package:firefox$ yarn package:webextension

Firefox Signing

Sie können die Web Extension signieren. Sie benötigen jedoch einen API-Schlüssel und ein API-Geheimnis, um die Web-Erweiterung zu signieren (diese erhalten Sie hier).Wenn Sie die ID der Erweiterung leer lassen, wird eine neue ID generiert. Sie können die generierte ID in Zukunft verwenden, um die Erweiterung zu aktualisieren, anstatt bei jedem Update neue Erweiterungen zu erstellen.

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

TODO

  • Unterstützung für die Verfolgung des Fortschritts hinzufügen
    • Chrunchyroll
      • Verfolgung der gesehenen Episoden
      • Nutzen Sie Crunchyrolls Fortsetzungsfunktion.
    • Kitsu
      • Episoden nachverfolgen
    • MyAnimeList
      • Episoden nachverfolgen
    • Lokal
      • Episoden nachverfolgen
      • Episoden nachverfolgen, die du in einem Video gesehen hast.
      • Fortsetzen von Videos, die Sie noch nicht vollständig angesehen haben
    • …
  • Option zum Ändern von Untertiteln in andere Sprachen hinzufügen. Derzeit wird nur der Standarduntertitel angezeigt (in den meisten Fällen wird dies Englisch sein).
  • Weitere Schriftarten hinzufügen. Zurzeit ist nur Arial verfügbar. Sollte recht einfach sein, aber es müssen noch einige Tests durchgeführt werden.
  • Überlegen Sie, die Qualitätsauswahl in den Player zu verlegen.
  • Prüfen Sie, ob Sie Chromecast-Unterstützung hinzufügen können.
  • Fügen Sie einen Endbildschirm hinzu, der anzeigt, dass der Benutzer die aktuelle Episode beendet hat und vielleicht automatisch zur nächsten Episode wechselt.
  • Füge mehrere Versionen dieses Projekts für Benutzerskripte, Chrome, Firefox und mehr hinzu.
  • Füge eine Möglichkeit hinzu, wie sich der Player die Entscheidungen des Benutzers merken kann, wie hoch oder niedrig die Lautstärke ist.
  • Die Größe des Codes im Benutzerskript reduzieren.

Hauptbibliotheken

  • hls.js
  • JavascriptSubtitlesOctopus

Schreibe einen Kommentar