tholinka / crunchyroll-html5 Archived

by

Latest release Greenkeeper badge

本当にフラッシュが嫌いで早急に止めたいんですよ。 しかし、現在、Crunchyroll で利用できる HTML5 プレーヤーは、サブスクリプションなしで利用できません。

特徴

  • 本格的な HTML5 プレーヤーで、見た目も YouTube のプレーヤーによく似ています。
  • プレーヤーで字幕を変更 (JavascriptSubtitlesOctopus と libass を使用)。
  • スピードコントロール。
  • 次のビデオを自動再生。
  • ショートカット (ショートカットのリストを参照)。

ダウンロード

Chrome 拡張。 https://chrome.google.com/webstore/detail/crunchyroll-html5/ihegfgnkffeibpmnajnoiemkcmlbmhmi

Firefox アドオン。 https://addons.mozilla.org/en-US/firefox/addon/crunchyroll-html5-unofficial/

Screenshots

Preview

Subtitle Engine

ブラウザは字幕表示が本当に下手なので、私は SSA/ASS 字幕を表示できるライブラリを探さなければなりませんでした。 WebVTT を使用することだけを検討しましたが、Chrome は大きな黒いボックスなしでそれらをレンダリングすることが本当にできませんでした。 しかし、default.ttffile と thefonts.conffile を動的にロードできるようにするために、プロジェクトにいくつかの変更を加える必要がありました。 また、エンジンを実行している WebWorker を再起動せずに字幕トラックを変更する方法も実装しました。

すべての変更はここで見ることができます。 Crunchyroll で動作させるには、http://www.crunchyroll.com/*上でスクリプトを実行できるようにするためのuserscriptヘッダを前置する必要があります。

ビルドする前に、Node.js と Yarn (オプション) がインストールされていることを確認してください。

ビルドは build:

$ yarn build

パッケージング

Firefox アドオンは firefox.xpi (署名ができないので無署名)、Web 拡張は webextension.zip (署名可能) としてパッケージ化できます。

$ yarn package:firefox$ yarn package:webextension

Firefox Signing

Web Extension に署名することができます。 ただし、Web Extensionに署名するにはAPIキーとAPIsecretが必要です（APIキーはこちらで取得できます）。拡張機能のIDを空にすると、新しいIDが生成されます。 

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

TODO

  • Tracking progress
    • Chrunchyroll
      • Tracking episodes watched
      • Use Crunchyrolls resume feature.
    • Kitsu
      • Tracking episodes watched
    • MyAnimeList
      • Tracking episodes watched
    • Local
      • Tracking episodes watched
      • ビデオで何を視聴したかのトラッキングができるようになります。
      • まだ完全に見ていないビデオを再開する。
    • …
  • 他の言語への字幕を変更するオプションを追加しました。 現在、デフォルトのサブタイトルのみが表示されます (ほとんどの場合、これは英語になります)。
  • より多くのフォントを追加。 現在、Arial のみ利用可能です。
  • 品質選択をプレーヤーに移動することを検討する。
  • Chromecast サポートの追加を検討する。
  • ユーザースクリプト、Chrome、Firefox およびその他用に、このプロジェクトの複数のバージョンを追加する。
  • 音量が高いか低いかといったユーザーの選択をプレーヤーが記憶する方法を追加する。
  • ユーザースクリプトのコードのサイズを縮小することを検討する。

メイン ライブラリ

  • hls.js
  • JavascriptSubtitlesOctopus

コメントする