tholinka / crunchyroll-html5 Archivé

par

Dernière version Badge Greenkeeper

Nous n’aimons vraiment pas flash et voulons qu’il soit tué dès que possible. Cependant, il n’y a actuellement aucun lecteur HTML5 disponible pour Crunchyroll sans avoir un abonnement. C’est donc la réponse.

Caractéristiques

  • Un lecteur HTML5 à part entière qui ressemble beaucoup au lecteur de YouTube.
  • Changer la qualité vidéo dans le lecteur.
  • Changer les sous-titres dans le lecteur (en utilisant libass avec JavascriptSubtitlesOctopus).
  • Contrôles de vitesse.
  • Lecture automatique de la vidéo suivante.
  • Shortcuts (voir liste des raccourcis)

Téléchargement

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

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

Captures d’écran

Preview

Moteur de sous-titres

Le navigateur est vraiment mauvais pour afficher les sous-titres donc j’ai dû trouver une bibliothèque capable de rendre les sous-titres SSA/ASS. J’ai cherché à utiliser simplement WebVTT, maisChrome n’était pas vraiment capable de les rendre sans une grande boîte noire autour d’eux.

J’ai donc décidé d’utiliserJavascriptSubtitlesOctopus,qui est un projet emscripten quifait fonctionner libass dans le navigateur avec le support des polices. Cependant, j’ai dû apporter quelques modifications au projet pour permettre le chargement dynamique du fichier default.ttffile et du fichier fonts.conffile. J’ai également mis en œuvre un moyen de changer la piste de sous-titres sans avoir besoin de redémarrer le WebWorker qui exécute le moteur.

Toutes les modifications peuvent être trouvées ici.

Build

La construction de ce projet donnera lieu à un fichier crunchyroll-html5.user.js dans le répertoire/dist. Pour le faire fonctionner sur Crunchyroll, vous devez ajouter un en-tête auserscript qui permet l’exécution du script surhttp://www.crunchyroll.com/*. Je ne l’ai actuellement pas rendu capable de construire foreach browser ou userscript.

Avant de construire, assurez-vous que vous avez installé Node.jset Yarn (facultatif). Après cela, vous êtes tenu d’installer les dépendances du projet par le biais de Yarn.

La construction se fait en exécutant le script build:

$ yarn build

Packaging

Vous pouvez empaqueter l’addon Firefox hérité comme firefox.xpi (non signé car il n’est plus possible de le signer) et l’extension Web comme webextension.zip(signable voir ci-dessous).

$ yarn package:firefox$ yarn package:webextension

Signature de Firefox

Vous êtes en mesure de signer l’extension Web. Cependant, vous avez besoin d’une clé API et d’un APIsecret pour pouvoir signer l’extension Web (vous pouvez en obtenir unici).Si vous laissez l’ID de l’extension vide, un nouvel ID sera généré. Vous pouvez utiliser l’ID généré à l’avenir pour mettre à jour l’extension au lieu de créer de nouvelles extensions à chaque mise à jour.

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

TODO

  • Ajouter un support pour le suivi de la progression
    • Chrunchyroll
      • Suivre les épisodes regardés
      • Utiliser la fonctionnalité de reprise de Crunchyroll.
    • Kitsu
      • Repérage des épisodes regardés
    • MyAnimeList
      • Repérage des épisodes regardés
    • Local
      • Repérage des épisodes regardés
      • Repérage de ce que vous avez regardé dans une vidéo.
      • Reprendre les vidéos que vous n’avez pas encore complètement regardées.
    • …
  • Ajouter une option pour changer les sous-titres en d’autres langues. Actuellement, seul le sous-titre par défaut est affiché (dans la plupart des cas, ce sera l’anglais).
  • Ajouter plus de polices de caractères. Actuellement, seule la police Arial est disponible. Cela devrait être assez facile, mais des tests doivent être effectués pour cela.
  • Envisager de déplacer la sélection de la qualité dans le lecteur.
  • Regarder l’ajout du support Chromecast.
  • Ajouter un écran de fin pour indiquer que l’utilisateur a terminé l’épisode actuel etpeut-être passer automatiquement à l’épisode suivant.
  • Ajouter plusieurs versions de ce projet pour les scripts des utilisateurs, Chrome, Firefox et plus.
  • Ajouter un moyen pour le lecteur de se souvenir des choix de l’utilisateur comme comment le volume est élevé ou faible.
  • Voir comment réduire la taille du code dans le userscript.

Bibliothèques principales

  • hls.js
  • JavascriptSubtitlesOctopus

.

Laisser un commentaire