tholinka / crunchyroll-html5 Arhivat

Noi chiar nu ne place flash și vrem să-l ucidem cât mai repede posibil. Cu toate acestea, în prezent nu există un player HTML5 disponibil pentru Crunchyroll fără a avea un abonament. Așa că acesta este răspunsul.

Caracteristici

• Un player HTML5 cu drepturi depline care arată și se simte foarte asemănător cu playerul YouTube.
• Schimbă calitatea video în player.
• Schimbă subtitrările în player (folosind libass cu JavascriptSubtitlesOctopus).
• Controale de viteză.
• Reducere automată a următorului videoclip.
• Scurtaturi (vezi lista de scurtături)

Descărcare

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

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

Capturi de ecran

Motor de subtitrare

Browserul este foarte prost la afișarea subtitrărilor, așa că a trebuit să găsesc o bibliotecă capabilă să redea subtitrările SSA/ASS. Am căutat să folosesc doar WebVTT, darChrome nu era chiar capabil să le redea fără o cutie neagră mare în jurul lor.

Așa că am decis să folosescJavascriptSubtitlesOctopus, care este un proiect emscripten care face ca libass să funcționeze în browser cu suport pentru fonturi. Cu toate acestea, am fost nevoit să fac unele modificări la proiect pentru a permite încărcarea dinamică a fișieruluidefault.ttffile și a fișieruluifonts.conffile. Am implementat, de asemenea, o modalitate de a schimba pista de subtitrare fără a fi nevoie să repornesc WebWorker-ul care rulează motorul.

Toate modificările pot fi găsite aici.

Build

Constituirea acestui proiect va avea ca rezultat un fișier crunchyroll-html5.user.js în directorul/dist. Pentru a-l face să ruleze pe Crunchyroll trebuie să adăugați în prealabil un antet auserscript care să permită executarea scriptului pehttp://www.crunchyroll.com/*. Deocamdată nu l-am făcut capabil să construiască foreach browser sau userscript.

Înainte de a-l construi, asigurați-vă că ați instalat Node.jsși Yarn (opțional). După aceea vi se cere să instalați dependențele proiectului fie prin Yarn.

Consolidarea se face prin rularea scriptului build:

$ yarn build

Împachetare

Puteți împacheta addon-ul Firefox moștenit ca firefox.xpi (nesemnat, deoarece nu mai este posibil să-l semnați) și extensia web ca webextension.zip (semnabilă, vezi mai jos).

$ yarn package:firefox$ yarn package:webextension

Firefox Signing

Puteți semna extensia Web. Cu toate acestea, aveți nevoie de o cheie API și un APIsecret pentru a putea semna extensia Web (puteți obține unul aici). dacă lăsați ID-ul extensiei gol, va fi generat unul nou. Puteți utiliza ID-ul generat în viitor pentru a actualiza extensia în loc să creați extensii noi la fiecare actualizare.

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

TODO

• Adaugați suport pentru urmărirea progresului
  • Chrunchyroll
    • Urmărirea episoadelor vizionate
    • Utilizați funcția de reluare Crunchyrolls.
  • Kitsu
    • Tracking episodes watched
  • MyAnimeList
    • Tracking episodes watched
  • Local
    • Tracking episodes watched
    • Tracking episodes watched
    • Tracking what you’ve watched in a video.
    • Reîncepeți videoclipurile pe care nu le-ați vizionat complet încă.
  • …
• Adaugați opțiunea de a schimba subtitrările în alte limbi. În prezent, este afișată doar subtitrarea implicită (în cele mai multe cazuri aceasta va fi engleza).
• Adaugați mai multe fonturi. În prezent, este disponibil doar Arial. Ar trebui să fie destul de ușor, dar trebuie făcute niște teste în acest sens.
• Considerați posibilitatea de a muta selecția calității în player.
• Considerați posibilitatea de a adăuga suport pentru Chromecast.
• Adaugați un ecran final pentru a indica faptul că utilizatorul a terminat episodul curent și poate trece automat la episodul următor.
• Adaugați mai multe versiuni ale acestui proiect pentru scripturi de utilizator, Chrome, Firefox și altele.
• Adaugați o modalitate prin care playerul să rețină alegerile utilizatorului, cum ar fi cât de mare sau mic este volumul.
• Gândiți-vă la reducerea dimensiunii codului din userscript.

Biblioteci principale

• hls.js
• JavascriptSubtitlesOctopus

.