Display ASS/SSA subtitles on html5 videos
ass-html5 uses the ass-compiler from weizhenye.
🏗 PROJECT UNDER DEVELOPEMENT 🏗
pnpm add ass-html5| 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 |
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><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>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>![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "github-actions[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent