HTML5 player for Crunchyroll

We really don't like flash and want it killed ASAP. However, there's currently no HTML5 player available for Crunchyroll without having a subscription. So this is the answer.

Features

• A fully fledged HTML5 player that looks and feels a lot like YouTube's player.
• Change video quality in the player.
• Change subtitles in the player (using libass with JavascriptSubtitlesOctopus).
• Speed controls.
• Auto-play the next video.
• Shortcuts (see list of shortcuts)

Download

Chrome extension: 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

The browser is really bad at displaying subtitles so I had to find a library that's able to render SSA/ASS subtitles. I've looked into just using WebVTT, but Chrome was not really able to render them without a big black box around them.

So I've decided on using JavascriptSubtitlesOctopus, which is an emscripten project that makes libass work in the browser with font support. However, I've been required to make some changes to the project to allow for dynamically loading the default.ttf file and the fonts.conf file. I've also implemented a way to change the subtitle track without needing to restart the WebWorker that's running the engine.

All modifcations can be found here.

Build

Building this project will result in a crunchyroll-html5.user.js file in the /dist directory. To make it run on Crunchyroll you need to prepend a userscript header that allows for script execution on http://www.crunchyroll.com/*. I've currently not made it able to build for each browser or userscript.

Before building make sure that you have installed Node.js and Yarn (optional). After that you're required to install the project dependencies through either Yarn.

Building is done by running the script build:

$ yarn build

Packaging

You can package the legacy Firefox addon as firefox.xpi (unsigned as it's not possible to sign it anymore) and the Web Extension as webextension.zip (signable see below).

$ yarn package:firefox
$ yarn package:webextension

Firefox Signing

You're able to sign the Web Extension. However, you need an API key and an API secret to be able to sign the Web Extension (you can get one here). If you leave the ID of the extension empty a new one will be generated. You can use the generated ID in the future to update the extension instead of creating new extensions every update.

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

TODO

• Add support for tracking progress
  • Chrunchyroll
    • Tracking episodes watched
    • Use Crunchyrolls resume feature.
  • Kitsu
    • Tracking episodes watched
  • MyAnimeList
    • Tracking episodes watched
  • Local
    • Tracking episodes watched
    • Tracking what you've watched in a video.
    • Resume videoes that you haven't completely watched yet.
  • ...
• Add option to change subtitles to other languages. Currently, only the default subtitle is displayed (in most cases this will be English).
• Add more fonts. Currently, only Arial is available. Should be quite easy, but some testing needs to be done for this.
• Consider moving the quality selection into the player.
• Look into adding Chromecast support.
• Add an endscreen to indicate the user has finished the currently episode and perhaps automatically go to the next episode.
• Add multiple versions of this project for userscripts, Chrome, Firefox and more.
• Add a way for the player to remember user choices as how high or low the volume is.
• Look into reducing the size of the code in the userscript.

Main Libraries

• hls.js
• JavascriptSubtitlesOctopus