tholinka / crunchyroll-html5 Archived

Naprawdę nie lubimy flasha i chcemy go zabić ASAP. Jednak obecnie nie ma żadnego odtwarzacza HTML5 dostępnego dla Crunchyroll bez posiadania subskrypcji. Więc to jest odpowiedź.

Cechy

• W pełni rozwinięty odtwarzacz HTML5, który wygląda i czuje się bardzo podobnie do odtwarzacza YouTube.
• Zmiana jakości wideo w odtwarzaczu.
• Zmiana napisów w odtwarzaczu (używając libass z JavascriptSubtitlesOctopus).
• Kontrola prędkości.
• Auto-odtwarzanie następnego wideo.
• Skróty (zobacz listę skrótów)

Pobierz

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

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

Screenshots

Subtitle Engine

Przeglądarka jest naprawdę kiepska w wyświetlaniu napisów, więc musiałem znaleźć bibliotekę, która jest w stanie renderować napisy SSA/ASS. Rozważałem użycie WebVTT, ale Chrome nie był w stanie renderować ich bez wielkiej czarnej ramki wokół nich.

Więc zdecydowałem się na użycie JavaScriptSubtitlesOctopus, który jest projektem emscripten, który sprawia, że libass działa w przeglądarce z obsługą czcionek. Jednakże, musiałem dokonać pewnych zmian w projekcie, aby umożliwić dynamiczne ładowanie pliku thedefault.ttffile i thefonts.conffile. Zaimplementowałem również sposób na zmianę ścieżki napisów bez potrzeby ponownego uruchamiania WebWorkera, który uruchamia silnik.

Wszystkie modyfikacje można znaleźć tutaj.

Build

Budowanie tego projektu spowoduje powstanie pliku crunchyroll-html5.user.js w katalogu/dist. Aby uruchomić go na Crunchyroll musisz dodać nagłówek auserscript, który pozwoli na wykonanie skryptu nahttp://www.crunchyroll.com/*. Obecnie nie sprawiłem, że jest on w stanie budować się dla każdej przeglądarki lub skryptu użytkownika.

Przed budową upewnij się, że masz zainstalowany Node.jsand Yarn (opcjonalnie). Następnie musisz zainstalować zależności projektu przez Yarn.

Budowanie odbywa się przez uruchomienie skryptu build:

$ yarn build

Pakowanie

Możesz spakować starszy dodatek do Firefoksa jako firefox.xpi (niepodpisany, ponieważ nie można go już podpisać) i rozszerzenie sieci Web jako webextension.zip (możliwe do podpisania zobacz poniżej).

$ yarn package:firefox$ yarn package:webextension

Podpisywanie Firefoksa

Jesteś w stanie podpisać rozszerzenie sieciowe. Jednakże, potrzebujesz klucza API i sekretu API, aby móc podpisać rozszerzenie sieciowe (możesz go uzyskać tutaj).Jeśli zostawisz ID rozszerzenia puste, zostanie wygenerowane nowe. Możesz użyć wygenerowanego ID w przyszłości do aktualizacji rozszerzenia zamiast tworzenia nowych rozszerzeń przy każdej aktualizacji.

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

TODO

• Dodaj wsparcie dla śledzenia postępu
  • Chrunchyroll
    • Śledzenie obejrzanych odcinków
    • Użyj funkcji wznawiania Crunchyrolls.
  • Kitsu
    • Śledzenie obejrzanych odcinków
  • MyAnimeList
    • Śledzenie obejrzanych odcinków
  • Local
    • Śledzenie obejrzanych odcinków
    • Śledzenie obejrzanych filmów.
    • Wznawianie filmów, których jeszcze nie obejrzałeś w całości.
  • …
• Dodaj opcję zmiany napisów na inne języki. Obecnie wyświetlany jest tylko domyślny napis (w większości przypadków będzie to język angielski).
• Dodaj więcej czcionek. Obecnie dostępny jest tylko Arial. Powinno być to dość łatwe, ale trzeba przeprowadzić pewne testy w tym zakresie.
• Rozważenie przeniesienia wyboru jakości do odtwarzacza.
• Patrzenie na dodanie obsługi Chromecast.
• Dodanie ekranu końcowego, aby wskazać użytkownikowi, że skończył bieżący odcinek i być może automatycznie przejść do następnego odcinka.
• Dodaj wiele wersji tego projektu dla skryptów użytkownika, Chrome, Firefox i więcej.
• Dodaj sposób na zapamiętanie przez odtwarzacz wyborów użytkownika, jak wysoki lub niski jest poziom głośności.
• Zaglądnij do zmniejszenia rozmiaru kodu w skrypcie użytkownika.

Biblioteki główne

• hls.js
• JavascriptSubtitlesOctopus

.