From aab8a62dd1fd799d1042ed0c195dfce52e5d586c Mon Sep 17 00:00:00 2001
From: luxluth <delphin.blehoussi93@gmail.com>
Date: Wed, 12 Jul 2023 15:03:56 +0200
Subject: [PATCH] Update README.md

---
 README.md | 71 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 71 insertions(+)

diff --git a/README.md b/README.md
index d58501b..53e8c50 100644
--- a/README.md
+++ b/README.md
@@ -13,3 +13,74 @@ Display ASS/SSA subtitles on html5 videos
 **🏗 PROJECT UNDER DEVELOPEMENT 🏗**
 
 </div>
+
+## Table of Contents
+- [ass-html5](#ass-html5)
+  - [Table of Contents](#table-of-contents)
+  - [Installation](#installation)
+  - [Example](#example)
+    - [svelte and plry](#svelte-and-plry)
+
+## Installation
+
+```bash
+pnpm add ass-html5
+```
+
+## Example
+
+### [svelte](https://svelte.dev/) and [plry](https://github.com/sampotts/plyr)
+
+```svelte
+<script lang="ts">
+    import video from '$lib/assets/JJK0201.mp4'
+    import cc from '$lib/assets/JJK0201.ass?raw'
+    import ASS from 'ass-html5'
+    import { onMount } from 'svelte';
+    import Plyr from 'plyr'
+
+    const ass = new ASS({
+        assText: cc,
+        video: "#video-test"
+    })
+
+    const controls = [
+        'rewind',
+        'play', 
+        'fast-forward', 
+        'progress', 
+        'current-time',
+        'duration', 
+        'mute',
+        'volume',
+        'settings',
+        'airplay', 
+        'fullscreen', 
+    ]
+
+    let vidElement: HTMLVideoElement
+    
+    onMount(() => {
+        const player = new Plyr(vidElement, {
+            controls
+        })
+        
+        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>
+```