Skip to content

luxluth/ass-html5

Repository files navigation

ass-html5

Display ASS/SSA subtitles on html5 videos

CI workflow Publish workflow License npm bundle size npm

Table of Contents

Installation

pnpm add ass-html5

Usage

Options

option description required type default
assText The ass text string string undefined
video The video to display the subtile on. Can be either an HTMLVideoElement or string (html query selector ) HTMLVideoElement / string undefined
fonts Custom fonts to load 🚫 Font[] undefined
zIndex zIndex of the rendering frame 🚫 number Drawn after the video
onReady A Callback that is invoked when the preprocess of the ass text by render is done 🚫 () => void undefined
logging Type of logging (experimental) 🚫 LOGTYPE LOGTYPE.DISABLE

Simple HTML

Note

The simple video tag element, in fullscreen mode, the position of the video is absolutely on top of any element. No other element can go on top of it.

It's therefore recommended to use a third party player rather than the native one. You can see an example with plry here.

<script src="https://cdn.jsdelivr.net/npm/ass-html5@0.5.1/dist/ass.min.js"></script>
<video src="/assets/video.mp4" id="video" controls></video>
<script>
  document.addEventListener('DOMContentLoaded', async () => {
    let res = await fetch('/assets/video.ass');
    let assSubs = await res.text();

    const ass = new ASS.default({
      assText: assSubs,
      video: document.getElementById('video')
    });
    await ass.render();
  });
</script>
<script lang="ts">
    import video from '$lib/assets/video.mp4'
    import cc from '$lib/assets/cc.ass?raw'
    import ASS from 'ass-html5'
    import { onMount } from 'svelte';
    import Plyr from 'plyr'

    const ass = new ASS({
        assText: cc,
        video: "#video-test"
    })

    let vidElement: HTMLVideoElement
    let player: Plyr
    onMount(async () => {
        player = new Plyr(vidElement)
        await ass.render()
    })

</script>

<div class="video-container">
    <!-- svelte-ignore a11y-media-has-caption -->
    <video
        preload="metadata"
        src="{video}"
        id="video-test"
        controls
        autoplay
        class="vid"
        bind:this={vidElement}
    ></video>
</div>

In the head :

<script src="https://cdn.jsdelivr.net/npm/ass-html5@0.5.1/dist/ass.min.js" defer></script>
<script src="https://vjs.zencdn.net/8.3.0/video.min.js" defer></script>
<link href="https://vjs.zencdn.net/8.3.0/video-js.css" rel="stylesheet" />

In the body :

<video
  id="my-video"
  class="video-js"
  controls
  preload="auto"
  width="1280"
  height="720"
  data-setup="{}"
>
  <source src="assets/video.mp4" type="video/mp4" />
</video>

In the script tag :

<script>
  document.addEventListener('DOMContentLoaded', async () => {
    let res = await fetch('/assets/video.ass');
    let assSubs = await res.text();

    var player = videojs('my-video');

    player.ready(async () => {
      // Get the video element from the player
      var videoElement = player.el().getElementsByTagName('video')[0];
      const ass = new ASS.default({
        assText: assSubs,
        video: videoElement
      });
      await ass.render();
    });
  });
</script>

Credits

Thanks to the ass-compiler by weizhenye.