ass-html5

Display ASS/SSA subtitles on html5 videos

ass-html5 uses the ass-compiler from weizhenye.

🏗 PROJECT UNDER DEVELOPEMENT 🏗

Table of Contents

• ass-html5
  • Table of Contents
  • Installation
  • Usage
    • Options
    • Simple HTML
    • Svelte and Plry
    • videojs

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

Simple HTML

[!NOTE] The simple video tag element, on fullscreen mode, the position of the video is absoluty on top of any element. No other element can go on top of it.

It's therefore recommanded 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@<VERSION>/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({
			assText: assSubs,
			video: document.getElementById('video')
		})
		await ass.init()
	})
</script>

Svelte and Plry

<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.init()
    })

</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>

videojs

In the head :

<script src="https://cdn.jsdelivr.net/npm/ass-html5@<VERSION>/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({
				assText: assSubs,
				video: videoElement
			})
			await ass.init()
		})
	})
</script>