Better Example

[arnavion]

Better Example

[Anime4000]

You can take a look on my example:
https://kwikmandarin.net/content/demo/html5-ass/index3.html

simply see Source Script 👍

[Arnavion]

Yes, it could do with some more comments. Meanwhile:

1. Use the ASS URL to fetch the ASS object.

   var assLoadedPromise = libjass.ASS.fromUrl(assUrl);

   Note that this is a Promise, i.e., an async operation.

2. Get a reference to the video element.

   var video = document.querySelector("#idvideo");

3. Use DefaultRenderer to render subs.

   assLoadedPromise.then(function (ass) {
       var renderer = new libjass.renderers.DefaultRenderer(video, ass);
   });

---

That's the basic usage. More advanced things below:

• Autoplay the video when the renderer is ready (it downloads all the fonts referenced in the ASS so it takes time to become ready):

  renderer.addEventListener("ready", function () {
      video.play();
  });

• Enable / disable the subs (let's say you have a <input type="checkbox" id="enable-disable-subs">):

  document.querySelector("#enable-disable-subs").addEventListener("change", function (event) {
      renderer.setEnabled(event.target.checked);
  }, false);

• Resize the subs when the video is resized:

  renderer.resize(newWidth, newHeight);

  You would typically get newWidth and newHeight from some user-selection. For example you might have a dropdown with a list of resolutions (like Youtube has).

• Use WebRenderer instead of DefaultRenderer for more control over the subtitles div, at the cost of losing some convenience features.

[maxx1985]

It works!!! Nice! Thanks a lot for the exaustive explanation!

the code that worked for me is the ''basic one''

<video id="player" controls='controls' >
    <source src="VIDEO_URL_HERE" type="video/mp4">

    <script>
        var assLoadedPromise = libjass.ASS.fromUrl("ASS_URL_HERE");
        var video = document.querySelector("#player");
        assLoadedPromise.then(function (ass) {
            var renderer = new libjass.renderers.DefaultRenderer(video, ass);
        });
    </script>

</video>

Thanks also to Anime4000 i've used the basic structure of your work

[Arnavion]

http://arnavion.github.io/libjass/demo/index.js now contains more comments. I hope that helps.