From 36f83ff72c517e49f761949abdb686d964ae6c27 Mon Sep 17 00:00:00 2001
From: hibna <mertsudo1@gmail.com>
Date: Mon, 3 Nov 2025 02:35:56 +0300
Subject: [PATCH] Add SRT/FLV/RTMP support and update documentation

Introduced Python scripts for SRT subtitle checking and fixing, and added comprehensive documentation covering advanced features such as protocol detection, subtitle/audio/quality management, keyboard shortcuts, and touch gestures. Updated local settings to allow new build and Python commands, added TypeScript definitions for FLV, and implemented RTMP/FLV protocol support in the player. Removed CHANGELOG.md and made various improvements to styles and example app.
---
 .claude/settings.local.json                  |    6 +-
 CHANGELOG.md                                 |   70 -
 DOCUMENTATION.md                             | 3386 ++++++++++++------
 __pycache__/check_srt.cpython-311.pyc        |  Bin 0 -> 6017 bytes
 check_srt.py                                 |  109 +
 comprehensive_srt_check.py                   |  281 ++
 examples/App.tsx                             |    6 +-
 fix_srt.py                                   |  187 +
 package.json                                 |    5 +-
 src/components/ControlsLayer.css             |    5 +
 src/components/VideoElement.tsx              |  163 +-
 src/components/VideoPlayer.tsx               |   19 +-
 src/components/controls/CenterPlayButton.css |   24 +-
 src/components/controls/ProgressBar.css      |   12 +-
 src/components/controls/VolumeControl.css    |   22 +-
 src/components/overlays/LoadingSpinner.css   |    3 +-
 src/flv.d.ts                                 |    9 +
 src/types/index.ts                           |    2 +
 src/utils/hlsLoader.ts                       |   64 +-
 src/utils/hlsSetup.ts                        |   62 +-
 src/utils/m3u8Parser.ts                      |   88 +-
 src/utils/rtmpLoader.ts                      |  168 +
 src/utils/rtmpSetup.ts                       |  240 ++
 src/utils/videoProtocol.ts                   |  110 +
 vite.config.lib.ts                           |    3 +-
 vite.config.ts                               |    1 +
 26 files changed, 3833 insertions(+), 1212 deletions(-)
 delete mode 100644 CHANGELOG.md
 create mode 100644 __pycache__/check_srt.cpython-311.pyc
 create mode 100644 check_srt.py
 create mode 100644 comprehensive_srt_check.py
 create mode 100644 fix_srt.py
 create mode 100644 src/flv.d.ts
 create mode 100644 src/utils/rtmpLoader.ts
 create mode 100644 src/utils/rtmpSetup.ts
 create mode 100644 src/utils/videoProtocol.ts

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index aa93a33..7b90019 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -3,7 +3,11 @@
     "allow": [
       "Bash(find:*)",
       "Bash(cat:*)",
-      "Bash(npm run build:*)"
+      "Bash(npm run build:*)",
+      "Bash(python check_srt.py:*)",
+      "Bash(python fix_srt.py:*)",
+      "Bash(python:*)",
+      "Bash(pnpm run build:lib:*)"
     ],
     "deny": [],
     "ask": []
diff --git a/CHANGELOG.md b/CHANGELOG.md
deleted file mode 100644
index e63a38e..0000000
--- a/CHANGELOG.md
+++ /dev/null
@@ -1,70 +0,0 @@
-# Changelog
-
-All notable changes to this project will be documented in this file.
-
-The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
-and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
-
-## [Unreleased]
-
-### Added
-- ✅ Test infrastructure with Vitest and React Testing Library
-- 🌍 Internationalization (i18n) system with English and Turkish support
-- 📊 Comprehensive README with comparison table
-- 📝 44 unit tests covering core functionality
-- 🔄 Language prop for VideoPlayer component
-
-### Changed
-- 🌐 Replaced hardcoded strings with translation system
-- 📦 Updated build configuration for better tree-shaking
-
-### Fixed
-- 🐛 TypeScript errors in test setup file
-
-## [0.1.3] - 2025-01-29
-
-### Changed
-- 📦 Fixed CSS export path in package.json
-- 🔧 Build configuration improvements
-
-## [0.1.2] - 2025-01-29
-
-### Added
-- 📘 TypeScript declaration files support with vite-plugin-dts
-- 🎯 Full type safety for all exports
-
-## [0.1.1] - 2025-01-29
-
-### Added
-- 🎬 Initial release of Modern Video Player
-- ▶️ Core playback controls (play, pause, seek, volume)
-- 🎨 Modern, responsive UI with auto-hiding controls
-- ⌨️ Comprehensive keyboard shortcuts (15+ shortcuts)
-- 📱 Touch gesture support for mobile devices
-- 🎞️ HLS streaming support with automatic quality switching
-- 📝 Subtitle support (WebVTT and SRT)
-- 🎵 Multiple audio track support
-- 🖼️ Picture-in-Picture and Fullscreen support
-- 🎚️ Playback speed control (0.25x to 2x)
-- 🎨 Theme customization with CSS variables
-- 🔧 Zero runtime dependencies
-- 📦 Tiny bundle size (~15KB gzipped)
-- 🔄 HTTP Range Request support for large files
-- 🛡️ CORS error handling and helpful error messages
-- ⚡ Lazy loading for HLS.js and settings menu
-- 🎯 React 18+ support
-- 📘 Full TypeScript support
-
-### Technical Features
-- 🏗️ Built with React 18, TypeScript 5, and Vite 7
-- 🎨 CSS modules and CSS variables for styling
-- 🧩 Component-based architecture with React Context
-- 🪝 Custom hooks for keyboard shortcuts and touch gestures
-- 📦 ESM and UMD build outputs
-- 🔧 Aggressive bundle optimization with Terser
-- 🌲 Tree-shaking support
-
-[Unreleased]: https://gitea.hibna.com.tr/hibna/video-player/compare/v0.1.3...HEAD
-[0.1.3]: https://gitea.hibna.com.tr/hibna/video-player/compare/v0.1.2...v0.1.3
-[0.1.2]: https://gitea.hibna.com.tr/hibna/video-player/compare/v0.1.1...v0.1.2
-[0.1.1]: https://gitea.hibna.com.tr/hibna/video-player/releases/tag/v0.1.1
diff --git a/DOCUMENTATION.md b/DOCUMENTATION.md
index 50e2418..39cc0a2 100644
--- a/DOCUMENTATION.md
+++ b/DOCUMENTATION.md
@@ -1,42 +1,275 @@
-# 📚 Video Player - Kapsamlı Dokümantasyon
+# 🎬 @alper/video-player - Tam Dökümantasyon
 
-Modern, hafif ve özellik açısından zengin bir React video player kütüphanesi. Bu dokümantasyon, kütüphaneyi projelerinizde kullanmak için ihtiyacınız olan her şeyi içerir.
+**Modern, zengin özellikli ve hafif React video oynatıcı kütüphanesi**
+
+[![npm version](https://img.shields.io/npm/v/@alper/video-player.svg?style=flat-square)](https://www.npmjs.com/package/@alper/video-player)
+[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@alper/video-player?style=flat-square)](https://bundlephobia.com/package/@alper/video-player)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.9-blue?style=flat-square)](https://www.typescriptlang.org/)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://opensource.org/licenses/MIT)
+
+---
+
+## 📑 İçindekiler
+
+- [Genel Bakış](#-genel-bakış)
+- [Kurulum](#-kurulum)
+  - [NPM/PNPM ile Kurulum](#1-npmpnpm-ile-kurulum)
+  - [.npmrc Yapılandırması](#2-npmrc-yapılandırması)
+  - [Kütüphaneyi Yükleme](#3-kütüphaneyi-yükleme)
+- [Hızlı Başlangıç](#-hızlı-başlangıç)
+- [Mimari ve Yapı](#-mimari-ve-yapı)
+- [Özellikler](#-özellikler)
+  - [Video Format Desteği](#video-format-desteği)
+  - [Altyazı Sistemi](#altyazı-sistemi)
+  - [Ses Parça Yönetimi](#ses-parça-yönetimi)
+  - [Kalite Seviyesi Kontrolü](#kalite-seviyesi-kontrolü)
+  - [Klavye Kısayolları](#klavye-kısayolları)
+  - [Dokunmatik Jestler](#dokunmatik-jestler)
+- [API Referansı](#-api-referansı)
+  - [VideoPlayer Props](#videoplayer-props)
+  - [Exported Components](#exported-components)
+  - [Exported Hooks](#exported-hooks)
+  - [Exported Utilities](#exported-utilities)
+  - [Type Definitions](#type-definitions)
+- [Kullanım Örnekleri](#-kullanım-örnekleri)
+- [Gelişmiş Kullanım](#-gelişmiş-kullanım)
+- [State Yönetimi](#-state-yönetimi)
+- [Tema ve Özelleştirme](#-tema-ve-özelleştirme)
+- [Uluslararasılaştırma (i18n)](#-uluslararasılaştırma-i18n)
+- [Performans](#-performans)
+- [Tarayıcı Uyumluluğu](#-tarayıcı-uyumluluğu)
+- [Hata Yönetimi](#-hata-yönetimi)
+- [Geliştirme](#-geliştirme)
+- [Katkıda Bulunma](#-katkıda-bulunma)
+- [Lisans](#-lisans)
+
+---
+
+## 🌟 Genel Bakış
+
+`@alper/video-player`, React uygulamaları için özel olarak tasarlanmış, modern bir video oynatıcı kütüphanesidir. HLS streaming, RTMP/FLV desteği, çoklu altyazı ve ses parçaları, kalite değiştirme ve daha fazlası gibi gelişmiş özellikleri içerir.
+
+### Neden @alper/video-player?
+
+| Özellik | @alper/video-player | video.js | react-player | plyr |
+|---------|---------------------|----------|--------------|------|
+| **Paket Boyutu (gzipped)** | **~15KB** ✅ | ~500KB ❌ | ~50KB ⚠️ | ~30KB ⚠️ |
+| **Runtime Bağımlılıkları** | **0** ✅ | Çok ❌ | Az ⚠️ | Az ⚠️ |
+| **React Native** | **Evet** ✅ | Wrapper ⚠️ | **Evet** ✅ | Wrapper ⚠️ |
+| **TypeScript Native** | **Evet** ✅ | Types ⚠️ | Kısmi ⚠️ | Types ⚠️ |
+| **HLS Desteği** | **Evet** ✅ | Evet ✅ | Evet ✅ | Hayır ❌ |
+| **RTMP/FLV Desteği** | **Evet** ✅ | Hayır ❌ | Hayır ❌ | Hayır ❌ |
+| **Kalite Değiştirme** | **Evet** ✅ | Evet ✅ | Sınırlı ⚠️ | Hayır ❌ |
+| **Dokunmatik Jestler** | **15+** ✅ | Sınırlı ⚠️ | Hayır ❌ | Sınırlı ⚠️ |
+| **Klavye Kısayolları** | **15+** ✅ | ~8 ⚠️ | Temel ⚠️ | ~10 ⚠️ |
+| **i18n Desteği** | **Evet** ✅ | Evet ✅ | Hayır ❌ | Evet ✅ |
+
+### Ana Avantajlar
+
+- 📦 **%97 daha küçük** - video.js'e göre sadece 15KB (500KB yerine)
+- ⚡ **Çok hızlı** - Sıfır runtime bağımlılık, daha hızlı yükleme
+- 🎯 **React-first** - React için özel yapılmış, wrapper değil
+- 🔧 **Tam TypeScript** - Box'tan çıktığı gibi tam tip güvenliği
+- 🎨 **Kolay özelleştirme** - CSS değişkenleri ile tema desteği
+- 📱 **Mobil hazır** - Kapsamlı dokunmatik jest desteği
+- 🌍 **Uluslararasılaştırılmış** - İngilizce ve Türkçe yerleşik i18n
+- ♿ **Erişilebilir** - ARIA etiketleri ve klavye navigasyonu
+- 🎬 **Çoklu format** - MP4, WebM, HLS (.m3u8), RTMP/FLV desteği
+- 🔒 **Güvenli** - CORS hatası tespiti ve yardımcı hata mesajları
+
+---
 
 ## 📦 Kurulum
 
-### NPM ile Kurulum
+Bu kütüphane, Gitea üzerinde barındırılan özel bir npm registry'de yayınlanmaktadır. Kurulum için aşağıdaki adımları takip edin.
+
+### 1. NPM/PNPM ile Kurulum
+
+Öncelikle projenizde npm veya pnpm kurulu olduğundan emin olun:
 
 ```bash
-npm install @alper/video-player
+# npm kurulu mu kontrol et
+npm --version
+
+# pnpm kurulu mu kontrol et (opsiyonel, hızlı alternatif)
+pnpm --version
+
+# pnpm kurulu değilse
+npm install -g pnpm
 ```
 
-### Yarn ile Kurulum
+### 2. .npmrc Yapılandırması
+
+`@alper` scope'lu paketlerin Gitea registry'den çekilmesi için projenizin kök dizininde bir `.npmrc` dosyası oluşturmanız gerekir.
+
+#### Adım 2.1: .npmrc Dosyası Oluşturma
+
+Projenizin **kök dizininde** (package.json dosyasının bulunduğu yerde) `.npmrc` adlı bir dosya oluşturun:
 
 ```bash
+# Linux/Mac
+touch .npmrc
+
+# Windows (PowerShell)
+New-Item -Path .npmrc -ItemType File
+```
+
+#### Adım 2.2: .npmrc İçeriği
+
+`.npmrc` dosyasını aşağıdaki içerikle doldurun:
+
+```ini
+# @alper scope'u için Gitea registry'yi kullan
+@alper:registry=https://gitea.hibna.com.tr/api/packages/hibna/npm/
+
+# Authentication token
+# Token'ınızı almak için: https://gitea.hibna.com.tr/user/settings/applications
+# "Generate New Token" butonuna tıklayın ve "read:package" yetkisini seçin
+//gitea.hibna.com.tr/api/packages/hibna/npm/:_authToken=YOUR_TOKEN_HERE
+```
+
+**ÖNEMLİ:** `YOUR_TOKEN_HERE` kısmını kendi Gitea access token'ınız ile değiştirin!
+
+#### Adım 2.3: Gitea Access Token Alma
+
+1. Gitea hesabınıza giriş yapın: https://gitea.hibna.com.tr
+2. Sağ üst köşeden profil ikonuna tıklayın → **Settings**
+3. Sol menüden **Applications** seçeneğine tıklayın
+4. **Manage Access Tokens** bölümünde **Generate New Token** butonuna tıklayın
+5. Token için bir isim verin (örn: "video-player-npm")
+6. **Select permissions** bölümünde şu yetkileri seçin:
+   - `read:package` - Paketleri okuma yetkisi
+   - (Yayınlayacaksanız) `write:package` - Paket yayınlama yetkisi
+7. **Generate Token** butonuna tıklayın
+8. Oluşturulan token'ı kopyalayın (bu token sadece bir kez gösterilir!)
+9. Token'ı `.npmrc` dosyasındaki `YOUR_TOKEN_HERE` yerine yapıştırın
+
+#### Adım 2.4: .npmrc'yi .gitignore'a Ekleyin
+
+**ÇOK ÖNEMLİ:** Token'ınızı Git'e commit etmeyin! `.npmrc` dosyasını `.gitignore`'a ekleyin:
+
+```bash
+# .gitignore dosyasına ekleyin
+echo ".npmrc" >> .gitignore
+```
+
+`.gitignore` dosyanız şöyle görünmeli:
+
+```
+node_modules/
+dist/
+.npmrc         # ← Bu satırı ekleyin
+.env
+```
+
+#### Alternatif: Environment Variable Kullanımı (Önerilen - Daha Güvenli)
+
+Daha güvenli bir yöntem için token'ı environment variable olarak saklayabilirsiniz:
+
+**.npmrc dosyası:**
+```ini
+@alper:registry=https://gitea.hibna.com.tr/api/packages/hibna/npm/
+//gitea.hibna.com.tr/api/packages/hibna/npm/:_authToken=${GITEA_TOKEN}
+```
+
+**Environment variable ayarlama:**
+
+```bash
+# Linux/Mac (.bashrc veya .zshrc dosyasına ekleyin)
+export GITEA_TOKEN=your-actual-token-here
+
+# Windows (PowerShell)
+$env:GITEA_TOKEN="your-actual-token-here"
+
+# Windows (Kalıcı - Sistem Environment Variables)
+# Sistem Özellikler → Gelişmiş → Ortam Değişkenleri → Yeni
+# Değişken adı: GITEA_TOKEN
+# Değişken değeri: your-actual-token-here
+```
+
+**CI/CD için (GitHub Actions, GitLab CI, vb.):**
+
+Repository settings → Secrets → `GITEA_TOKEN` adında bir secret oluşturun.
+
+### 3. Kütüphaneyi Yükleme
+
+`.npmrc` dosyası yapılandırıldıktan sonra, kütüphaneyi yükleyebilirsiniz:
+
+```bash
+# npm ile
+npm install @alper/video-player
+
+# veya pnpm ile (önerilen - daha hızlı)
+pnpm add @alper/video-player
+
+# veya yarn ile
 yarn add @alper/video-player
 ```
 
-### Peer Dependencies
+### 4. Peer Dependencies
 
-Video player, React 18+ gerektirmektedir:
+Kütüphane, React 18+ gerektirir. Eğer projenizde yoksa:
 
 ```bash
-npm install react react-dom
+npm install react@^18.0.0 react-dom@^18.0.0
+# veya
+pnpm add react@^18.0.0 react-dom@^18.0.0
 ```
 
-### Opsiyonel Bağımlılıklar
+### 5. Optional Dependencies (Otomatik)
 
-HLS streaming desteği için hls.js otomatik olarak yüklenecektir (gerektiğinde):
+HLS ve RTMP/FLV desteği için gerekli kütüphaneler, ihtiyaç duyulduğunda **otomatik olarak lazy-load** edilir:
+
+- `hls.js` - HLS streaming için (.m3u8 dosyaları)
+- `flv.js` - RTMP/FLV streaming için
+
+Bu kütüphaneler manuel kuruluma gerek yoktur. Ancak bundle size'ı azaltmak için isterseniz kurabilirsiniz:
 
 ```bash
-npm install hls.js  # Opsiyonel
+npm install --save-optional hls.js flv.js
 ```
 
+### Kurulum Doğrulama
+
+Kurulumun başarılı olduğunu doğrulamak için:
+
+```bash
+npm list @alper/video-player
+# veya
+pnpm list @alper/video-player
+```
+
+Çıktı şöyle olmalı:
+```
+your-project@1.0.0
+└─┬ @alper/video-player@0.1.5
+```
+
+### Sorun Giderme
+
+**Problem: "401 Unauthorized" hatası**
+- `.npmrc` dosyasındaki token'ın doğru olduğundan emin olun
+- Token'ın `read:package` yetkisine sahip olduğundan emin olun
+- Token'ın süresi dolmamış olduğundan emin olun
+
+**Problem: "404 Not Found" hatası**
+- Registry URL'inin doğru olduğundan emin olun
+- `@alper:registry=https://gitea.hibna.com.tr/api/packages/hibna/npm/`
+- İnternet bağlantınızı kontrol edin
+- Gitea sunucusunun erişilebilir olduğundan emin olun
+
+**Problem: "Cannot find module '@alper/video-player'"**
+- `node_modules` klasörünü silin ve yeniden yükleyin:
+  ```bash
+  rm -rf node_modules package-lock.json
+  npm install
+  ```
+
 ---
 
 ## 🚀 Hızlı Başlangıç
 
-### Basit Kullanım
+### Temel Kullanım
 
 ```tsx
 import { VideoPlayer } from '@alper/video-player'
@@ -52,176 +285,396 @@ function App() {
 }
 ```
 
-### TypeScript Desteği
-
-Kütüphane tam TypeScript desteğine sahiptir ve tip tanımları otomatik olarak gelir:
-
-```tsx
-import { VideoPlayer, VideoPlayerProps } from '@alper/video-player'
-import '@alper/video-player/styles.css'
-
-const MyPlayer: React.FC = () => {
-  const props: VideoPlayerProps = {
-    src: "video.mp4",
-    autoplay: false,
-    loop: true,
-  }
-
-  return <VideoPlayer {...props} />
-}
-```
-
----
-
-## 🎬 Özellikler
-
-### ✅ Temel Özellikler
-
-- ▶️ **Oynatma Kontrolleri**: Play, pause, seek
-- 🔊 **Ses Kontrolü**: Volume slider ve mute
-- ⚡ **Hız Kontrolü**: 0.25x - 2x oynatma hızı
-- 🔄 **Loop Desteği**: Sürekli tekrar
-- 🖼️ **Poster Resmi**: Video başlamadan önce görünen thumbnail
-- ⌨️ **Klavye Kısayolları**: 15+ klavye kısayolu
-- 📱 **Touch Gesture'lar**: Mobil cihazlar için özel kontroller
-
-### 🎨 Gelişmiş Özellikler
-
-- 📺 **HLS Streaming**: .m3u8 dosyaları için otomatik HLS desteği
-- 📝 **Altyazı Desteği**: WebVTT ve SRT formatları
-- 🎵 **Çoklu Ses Kanalı**: Farklı dil seçenekleri
-- 🎯 **Kalite Seçimi**: HLS stream'lerinde otomatik kalite geçişi
-- 🖥️ **Fullscreen**: Native fullscreen API desteği
-- 📺 **Picture-in-Picture**: PIP mode desteği
-- 🌍 **i18n Desteği**: İngilizce ve Türkçe dil desteği
-- 🎨 **Tema Özelleştirme**: CSS değişkenleri ile kolay özelleştirme
-
-### ⚡ Performans
-
-- 📦 **Küçük Boyut**: Sadece ~15KB (gzipped)
-- 🚀 **Sıfır Runtime Bağımlılık**: React dışında bağımlılık yok
-- 🔄 **Lazy Loading**: HLS.js sadece gerektiğinde yüklenir
-- 🎯 **Optimize Edilmiş**: Tree-shakeable exports
-
----
-
-## 📖 API Referansı
-
-### VideoPlayer Props
-
-| Prop | Tip | Varsayılan | Açıklama |
-|------|-----|------------|----------|
-| `src` | `string` | **zorunlu** | Video kaynağı URL (MP4, WebM, HLS) |
-| `poster` | `string` | - | Poster/thumbnail resmi URL'si |
-| `autoplay` | `boolean` | `false` | Otomatik oynatma |
-| `loop` | `boolean` | `false` | Video tekrarı |
-| `muted` | `boolean` | `false` | Sessiz başlat |
-| `controls` | `boolean` | `true` | Kontrolleri göster |
-| `subtitles` | `SubtitleTrack[]` | `[]` | Altyazı track'leri |
-| `theme` | `PlayerTheme` | - | Özel tema renkleri |
-| `language` | `string` | `'tr'` | Arayüz dili (`'tr'` veya `'en'`) |
-| `keyboardShortcuts` | `boolean` | `true` | Klavye kısayollarını etkinleştir |
-| `pictureInPicture` | `boolean` | `true` | PIP butonunu göster |
-| `className` | `string` | - | Özel CSS class'ı |
-| `style` | `CSSProperties` | - | Inline style'lar |
-| `onPlay` | `() => void` | - | Oynatma başladığında |
-| `onPause` | `() => void` | - | Oynatma durduğunda |
-| `onEnded` | `() => void` | - | Video bittiğinde |
-| `onTimeUpdate` | `(time: number) => void` | - | Zaman güncellendiğinde |
-| `onVolumeChange` | `(volume: number) => void` | - | Ses seviyesi değiştiğinde |
-| `onError` | `(error: Error) => void` | - | Hata oluştuğunda |
-| `onLoadedMetadata` | `() => void` | - | Metadata yüklendiğinde |
-| `onSeeking` | `() => void` | - | Seek başladığında |
-| `onSeeked` | `() => void` | - | Seek bittiğinde |
-
-### SubtitleTrack
-
-```typescript
-interface SubtitleTrack {
-  src: string       // Altyazı dosyası URL'si (.vtt veya .srt)
-  lang: string      // Dil kodu (örn: 'en', 'tr')
-  label: string     // Görüntülenecek etiket
-  default?: boolean // Varsayılan altyazı olarak ayarla
-}
-```
-
-### AudioTrack
-
-```typescript
-interface AudioTrack {
-  name: string      // Ses track'inin adı
-  language: string  // Dil kodu
-  url: string       // Ses dosyası URL'si
-  groupId: string   // Grup ID'si
-  default?: boolean // Varsayılan olarak seç
-}
-```
-
-### VideoQuality
-
-```typescript
-interface VideoQuality {
-  height?: number   // Video yüksekliği (px)
-  label: string     // Görüntülenecek etiket (örn: "1080p")
-  width?: number    // Video genişliği (px)
-  bitrate?: number  // Bitrate (bps)
-  levelIndex?: number // HLS level index
-}
-```
-
-### PlayerTheme
-
-```typescript
-interface PlayerTheme {
-  primaryColor?: string      // Ana renk (varsayılan: #ef4444)
-  accentColor?: string       // Vurgu rengi (varsayılan: #dc2626)
-  backgroundColor?: string   // Arkaplan rengi (varsayılan: #000000)
-  textColor?: string         // Yazı rengi (varsayılan: #ffffff)
-}
-```
-
----
-
-## 💡 Kullanım Örnekleri
-
-### 1. Basit Video Oynatma
-
-En temel kullanım:
-
-```tsx
-import { VideoPlayer } from '@alper/video-player'
-import '@alper/video-player/styles.css'
-
-function SimplePlayer() {
-  return (
-    <VideoPlayer
-      src="/videos/sample.mp4"
-      poster="/images/thumbnail.jpg"
-    />
-  )
-}
-```
-
-### 2. Otomatik Oynatma ve Loop
-
-Video otomatik başlasın ve sürekli tekrarlansın:
+### HLS Streaming ile Kullanım
 
 ```tsx
 <VideoPlayer
-  src="/videos/intro.mp4"
-  autoplay
-  loop
-  muted // Not: Otomatik oynatma için genelde muted gereklidir
+  src="https://example.com/stream/master.m3u8"
+  autoplay={false}
+  subtitles={[
+    { src: '/subtitles/en.vtt', lang: 'en', label: 'English', default: true },
+    { src: '/subtitles/tr.srt', lang: 'tr', label: 'Türkçe' }
+  ]}
 />
 ```
 
-### 3. Altyazılı Video
-
-Çoklu altyazı desteği ile:
+### Event Handler'lar ile Kullanım
 
 ```tsx
 <VideoPlayer
-  src="/videos/movie.mp4"
+  src="https://example.com/video.mp4"
+  onPlay={() => console.log('Video oynatılmaya başladı')}
+  onPause={() => console.log('Video durakladı')}
+  onEnded={() => console.log('Video bitti')}
+  onTimeUpdate={(time) => console.log('Geçerli zaman:', time)}
+  onError={(error) => console.error('Video hatası:', error)}
+/>
+```
+
+### Tema Özelleştirmesi
+
+```tsx
+<VideoPlayer
+  src="https://example.com/video.mp4"
+  theme={{
+    primaryColor: '#ef4444',
+    accentColor: '#dc2626',
+    backgroundColor: '#000000',
+    textColor: '#ffffff',
+  }}
+/>
+```
+
+---
+
+## 🏗️ Mimari ve Yapı
+
+### Proje Yapısı
+
+```
+video-player/
+├── src/
+│   ├── components/          # React UI bileşenleri
+│   │   ├── controls/        # Kontrol butonları (Play, Pause, vb.)
+│   │   │   ├── PlayPauseButton.tsx
+│   │   │   ├── ProgressBar.tsx
+│   │   │   ├── VolumeControl.tsx
+│   │   │   ├── TimeDisplay.tsx
+│   │   │   ├── FullscreenButton.tsx
+│   │   │   ├── PIPButton.tsx
+│   │   │   ├── SettingsButton.tsx
+│   │   │   └── CenterPlayButton.tsx
+│   │   ├── menus/           # Ayar menüleri
+│   │   │   └── SettingsMenu.tsx
+│   │   ├── overlays/        # Overlay bileşenleri
+│   │   │   └── LoadingSpinner.tsx
+│   │   ├── VideoPlayer.tsx  # Ana wrapper bileşen
+│   │   ├── VideoElement.tsx # Video element handler
+│   │   └── ControlsLayer.tsx # Kontrol katmanı
+│   ├── contexts/            # React Context
+│   │   └── PlayerContext.tsx
+│   ├── hooks/               # Custom React hooks
+│   │   ├── useKeyboardShortcuts.ts
+│   │   └── useTouchGestures.ts
+│   ├── utils/               # Utility fonksiyonlar
+│   │   ├── hlsSetup.ts      # HLS.js setup
+│   │   ├── hlsLoader.ts     # HLS.js lazy loading
+│   │   ├── hlsControl.ts    # HLS kalite/ses kontrolü
+│   │   ├── rtmpSetup.ts     # FLV.js setup
+│   │   ├── rtmpLoader.ts    # FLV.js lazy loading
+│   │   ├── videoProtocol.ts # Protokol tespiti
+│   │   ├── m3u8Parser.ts    # M3U8 manifest parsing
+│   │   ├── subtitles.ts     # SRT/VTT altyazı işleme
+│   │   ├── corsHelper.ts    # CORS doğrulama
+│   │   ├── time.ts          # Zaman formatlama
+│   │   └── polyfills.ts     # Tarayıcı uyumluluk
+│   ├── icons/               # SVG icon bileşenleri
+│   │   └── index.tsx
+│   ├── styles/              # CSS değişkenleri
+│   │   └── variables.css
+│   ├── i18n/                # Uluslararasılaştırma
+│   │   └── index.ts         # İngilizce & Türkçe
+│   ├── types/               # TypeScript tanımları
+│   │   └── index.ts
+│   └── index.ts             # Ana export dosyası
+├── examples/                # Demo uygulaması
+│   ├── App.tsx
+│   └── main.tsx
+├── dist/                    # Build çıktısı
+├── package.json
+├── vite.config.ts           # Geliştirme config
+├── vite.config.lib.ts       # Kütüphane build config
+└── tsconfig.json
+```
+
+### Bileşen Hiyerarşisi
+
+```
+VideoPlayer (Main)
+├── PlayerProvider (Context)
+│   ├── VideoElement (Video handler)
+│   │   └── <video> element
+│   ├── ControlsLayer (Controls container)
+│   │   ├── CenterPlayButton (Overlay)
+│   │   ├── PlayPauseButton
+│   │   ├── ProgressBar
+│   │   ├── VolumeControl
+│   │   ├── TimeDisplay
+│   │   ├── SettingsButton
+│   │   ├── FullscreenButton
+│   │   ├── PIPButton
+│   │   └── SettingsMenu (Lazy-loaded)
+│   │       ├── Main Menu
+│   │       ├── Speed Menu
+│   │       ├── Quality Menu
+│   │       ├── Subtitle Menu
+│   │       └── Audio Track Menu
+│   └── LoadingSpinner (Overlay)
+```
+
+### State Management
+
+Kütüphane, **React Context API** kullanarak merkezi state yönetimi sağlar:
+
+- **VideoState**: Video durumu (playing, currentTime, duration, vb.)
+- **UIState**: UI durumu (controls visibility, menu states, vb.)
+- **PlayerSettings**: Player ayarları (quality, subtitle, audioTrack, vb.)
+
+Context yapısı, tüm child bileşenlerin state'e erişmesini ve güncellemesini sağlar.
+
+---
+
+## ✨ Özellikler
+
+### Video Format Desteği
+
+#### 1. Native HTML5 Video (MP4, WebM, OGG)
+
+**Desteklenen Formatlar:**
+- MP4 (H.264/H.265 codec)
+- WebM (VP8/VP9 codec)
+- OGG (Theora codec)
+
+**Nasıl Çalışır:**
+- Doğrudan `<video>` elementi ile `src` attribute kullanılır
+- HTTP Range Request desteği ile progressive download
+- Harici kütüphane gerektirmez
+- Tüm modern tarayıcılarda native destek
+
+**Kullanım:**
+```tsx
+<VideoPlayer src="https://example.com/video.mp4" />
+```
+
+#### 2. HLS Streaming (.m3u8)
+
+**Özellikler:**
+- Adaptive bitrate streaming (ABR)
+- Çoklu kalite seviyeleri
+- Çoklu ses parçaları
+- Altyazı parça çıkarma
+- Otomatik kalite seçimi
+- Live stream desteği
+
+**Kütüphane:** hls.js (opsiyonel, lazy-loaded)
+
+**Safari Desteği:** Safari'de native HLS desteği var, kütüphane yüklenmez
+
+**Loading Stratejisi:**
+1. HLS source tespit edilir (.m3u8 uzantısı)
+2. Safari ise → Native HLS kullanılır
+3. Diğer tarayıcılarda:
+   - Önce NPM package'dan hls.js yüklenir
+   - Başarısız olursa CDN'den fallback (jsdelivr)
+   - MSE desteği kontrol edilir
+
+**CDN Fallback:**
+```
+https://cdn.jsdelivr.net/npm/hls.js@1.5.13
+```
+
+**Kullanım:**
+```tsx
+<VideoPlayer src="https://example.com/stream/master.m3u8" />
+```
+
+**Manifest Örneği:**
+```m3u8
+#EXTM3U
+#EXT-X-VERSION:3
+
+# Kalite seviyeleri
+#EXT-X-STREAM-INF:BANDWIDTH=2000000,RESOLUTION=1920x1080
+1080p.m3u8
+#EXT-X-STREAM-INF:BANDWIDTH=1000000,RESOLUTION=1280x720
+720p.m3u8
+#EXT-X-STREAM-INF:BANDWIDTH=500000,RESOLUTION=854x480
+480p.m3u8
+
+# Ses parçaları
+#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="audio",NAME="English",LANGUAGE="en",URI="audio_en.m3u8"
+#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="audio",NAME="Turkish",LANGUAGE="tr",URI="audio_tr.m3u8"
+```
+
+**Hata Yönetimi:**
+- Network hataları → Otomatik yeniden bağlanma
+- Media hataları → HLS instance yeniden başlatma
+- Fatal hataları → Error state'e düşme
+
+#### 3. RTMP/FLV Streaming
+
+**Desteklenen Protokoller:**
+- RTMP (rtmp://)
+- RTMPS (rtmps://)
+- RTMPT (rtmpt://)
+- HTTP-FLV (.flv veya flv? query)
+
+**Kütüphane:** flv.js (opsiyonel, lazy-loaded)
+
+**Özellikler:**
+- Live stream desteği
+- Hata recovery
+- İstatistik takibi
+- Low latency
+
+**Loading Stratejisi:**
+1. RTMP/FLV source tespit edilir
+2. Önce NPM package'dan flv.js yüklenir
+3. Başarısız olursa CDN'den fallback
+4. MSE desteği kontrol edilir
+
+**CDN Fallback:**
+```
+https://cdn.jsdelivr.net/npm/flv.js@1.6.2
+```
+
+**ÖNEMLİ NOT:** Doğrudan RTMP URL'leri tarayıcıda çalışmaz. HTTP-FLV proxy gerektirir.
+
+**Kullanım:**
+```tsx
+// HTTP-FLV
+<VideoPlayer src="https://example.com/live.flv" />
+
+// RTMP (HTTP-FLV proxy gerektirir)
+<VideoPlayer src="rtmp://example.com/live/stream" />
+```
+
+**HTTP-FLV Proxy Örneği (Node.js):**
+```javascript
+// RTMP stream'i HTTP-FLV'ye dönüştüren proxy
+const ffmpeg = require('fluent-ffmpeg');
+
+ffmpeg('rtmp://source.com/live/stream')
+  .outputOptions([
+    '-c copy',
+    '-f flv'
+  ])
+  .pipe(res);
+```
+
+#### 4. DASH Support (Planlanıyor)
+
+**Durum:** Protokol tespit ediliyor ancak henüz implement edilmemiş
+
+**.mpd URL'leri tespit edilir ve hata mesajı döner:**
+```
+DASH streaming is detected but not yet supported
+```
+
+**Gelecek implementasyon** dash.js kütüphanesi ile planlanıyor.
+
+### Protocol Detection System
+
+**Dosya:** `src/utils/videoProtocol.ts`
+
+Video URL'inden otomatik protokol tespiti:
+
+```typescript
+function detectVideoProtocol(url: string): {
+  protocol: VideoProtocol
+  isLive: boolean
+  needsSpecialPlayer: boolean
+}
+```
+
+**Tespit Mantığı:**
+
+1. **HLS:** `.m3u8` uzantısı
+2. **RTMP:** `rtmp://`, `rtmps://`, `rtmpt://`, `rtmpe://` protokolleri
+3. **FLV:** `.flv` uzantısı veya URL'de `flv?` var
+4. **DASH:** `.mpd` uzantısı
+5. **Native:** Diğer her şey (MP4, WebM, vb.)
+
+**Live Stream Tespiti:**
+- RTMP/FLV → Her zaman live
+- HLS → Manifest'te `#EXT-X-PLAYLIST-TYPE:VOD` yoksa live
+- Diğerleri → VOD
+
+**Kullanım:**
+```typescript
+import { detectVideoProtocol } from '@alper/video-player'
+
+const info = detectVideoProtocol('https://example.com/stream.m3u8')
+console.log(info.protocol)        // 'hls'
+console.log(info.isLive)          // true/false
+console.log(info.needsSpecialPlayer) // true
+```
+
+### Altyazı Sistemi
+
+**Dosyalar:**
+- `src/utils/subtitles.ts` - Altyazı işleme
+- `src/components/VideoElement.tsx` - Altyazı entegrasyonu
+
+#### Desteklenen Formatlar
+
+**1. WebVTT (.vtt):**
+- Native tarayıcı desteği
+- Doğrudan `<track>` elementi ile kullanılır
+
+**2. SRT (.srt):**
+- WebVTT'ye otomatik dönüştürme
+- Blob URL ile tarayıcıya verilir
+
+#### Özellikler
+
+- ✅ Çoklu altyazı parçaları
+- ✅ Dil seçimi
+- ✅ Varsayılan altyazı desteği
+- ✅ Yüklendiğinde otomatik etkinleştirme
+- ✅ SRT → VTT dönüşümü
+- ✅ HLS manifest'ten altyazı çıkarma
+- ✅ Manuel ve HLS altyazı birleştirme
+
+#### SRT → VTT Dönüşümü
+
+**SRT Format:**
+```srt
+1
+00:00:01,000 --> 00:00:04,000
+Merhaba dünya
+
+2
+00:00:05,000 --> 00:00:08,000
+İkinci altyazı
+```
+
+**WebVTT Format (dönüştürülmüş):**
+```vtt
+WEBVTT
+
+00:00:01.000 --> 00:00:04.000
+Merhaba dünya
+
+00:00:05.000 --> 00:00:08.000
+İkinci altyazı
+```
+
+**Dönüşüm Fonksiyonu:**
+```typescript
+import { parseSRT, createSubtitleBlobURL } from '@alper/video-player'
+
+const srtContent = '...' // SRT içeriği
+const vttContent = parseSRT(srtContent)
+const blobUrl = createSubtitleBlobURL(vttContent)
+// blobUrl → blob:http://localhost:5173/abc123...
+```
+
+#### Implementation Akışı
+
+1. Altyazı dosyaları fetch edilir
+2. SRT ise WebVTT'ye dönüştürülür
+3. Blob URL'leri oluşturulur
+4. `<track>` elementleri dinamik olarak eklenir
+5. Track mode Settings context üzerinden kontrol edilir
+6. Component unmount'ta blob URL'leri temizlenir
+
+#### Kullanım
+
+**Temel Kullanım:**
+```tsx
+<VideoPlayer
+  src="video.mp4"
   subtitles={[
     {
       src: '/subtitles/english.vtt',
@@ -233,150 +686,953 @@ Video otomatik başlasın ve sürekli tekrarlansın:
       src: '/subtitles/turkish.srt',
       lang: 'tr',
       label: 'Türkçe'
-    },
-    {
-      src: '/subtitles/spanish.vtt',
-      lang: 'es',
-      label: 'Español'
     }
   ]}
 />
 ```
 
-### 4. HLS Streaming
-
-HLS video için (hls.js otomatik yüklenir):
-
+**HLS ile Otomatik Altyazı (manifest'ten):**
 ```tsx
-<VideoPlayer
-  src="https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"
-  autoplay={false}
-  poster="/images/stream-poster.jpg"
-/>
+<VideoPlayer src="stream.m3u8" />
+// HLS manifest'te altyazılar varsa otomatik ekler
 ```
 
-HLS streaming ile kalite seçimi otomatik olarak aktif olur.
-
-### 5. Event Handler'lar ile İleri Seviye Kullanım
-
-Video olaylarını dinleme:
-
+**Programmatic Control:**
 ```tsx
-import { useState } from 'react'
-import { VideoPlayer } from '@alper/video-player'
+import { usePlayerContext } from '@alper/video-player'
 
-function AdvancedPlayer() {
-  const [currentTime, setCurrentTime] = useState(0)
-  const [isPlaying, setIsPlaying] = useState(false)
+function CustomSubtitleToggle() {
+  const { settings, setSubtitle } = usePlayerContext()
 
   return (
-    <div>
-      <VideoPlayer
-        src="/videos/tutorial.mp4"
-        onPlay={() => {
-          console.log('Video başladı!')
-          setIsPlaying(true)
-        }}
-        onPause={() => {
-          console.log('Video durdu!')
-          setIsPlaying(false)
-        }}
-        onTimeUpdate={(time) => {
-          setCurrentTime(time)
-        }}
-        onEnded={() => {
-          console.log('Video bitti!')
-          // Örnek: Sonraki videoya geç
-        }}
-        onError={(error) => {
-          console.error('Video hatası:', error)
-          // Hata gösterimi veya fallback
-        }}
-      />
-
-      <div>
-        <p>Durum: {isPlaying ? 'Oynatılıyor' : 'Durdu'}</p>
-        <p>Zaman: {Math.floor(currentTime)}s</p>
-      </div>
-    </div>
+    <button onClick={() => setSubtitle(settings.subtitle ? null : mySubtitle)}>
+      {settings.subtitle ? 'Altyazıyı Kapat' : 'Altyazıyı Aç'}
+    </button>
   )
 }
 ```
 
-### 6. Özel Tema
+### Ses Parça Yönetimi
 
-Kendi renk şemanızla özelleştirme:
+**Dosyalar:**
+- `src/utils/hlsLoader.ts` - HLS ses parçası çıkarma
+- `src/utils/hlsControl.ts` - Ses parçası kontrolü
+
+#### Özellikler
+
+- ✅ HLS manifest'ten ses parçası çıkarma
+- ✅ Oynatma sırasında değiştirme
+- ✅ Dil tespiti
+- ✅ Varsayılan parça seçimi
+- ✅ Otomatik seçim desteği
+
+#### HLS Manifest'ten Çıkarma
+
+**Manifest Örneği:**
+```m3u8
+#EXTM3U
+#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="audio",NAME="English",DEFAULT=YES,AUTOSELECT=YES,LANGUAGE="en",URI="audio_en.m3u8"
+#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="audio",NAME="Turkish",LANGUAGE="tr",URI="audio_tr.m3u8"
+```
+
+**Çıkarılan AudioTrack:**
+```typescript
+{
+  name: "English",
+  language: "en",
+  url: "audio_en.m3u8",
+  groupId: "audio",
+  default: true,
+  autoselect: true
+}
+```
+
+#### Kullanım
+
+**Programmatic Control:**
+```tsx
+import { usePlayerContext } from '@alper/video-player'
+
+function AudioTrackSelector() {
+  const { settings, setAudioTrack } = usePlayerContext()
+  const [tracks] = useState<AudioTrack[]>([...]) // HLS'den alınan parçalar
+
+  return (
+    <select
+      value={settings.audioTrack?.name}
+      onChange={(e) => {
+        const track = tracks.find(t => t.name === e.target.value)
+        setAudioTrack(track || null)
+      }}
+    >
+      {tracks.map(track => (
+        <option key={track.name} value={track.name}>
+          {track.label} ({track.language})
+        </option>
+      ))}
+    </select>
+  )
+}
+```
+
+### Kalite Seviyesi Kontrolü
+
+**Dosyalar:**
+- `src/utils/hlsLoader.ts` - Kalite çıkarma
+- `src/utils/hlsControl.ts` - Kalite kontrolü
+
+#### Özellikler
+
+- ✅ HLS'den çoklu kalite seviyeleri
+- ✅ Manuel kalite seçimi
+- ✅ Otomatik kalite (adaptive bitrate)
+- ✅ Çözünürlük bazlı etiketleme (1080p, 720p, vb.)
+- ✅ Bitrate bilgisi gösterimi
+- ✅ Seçilen kalitenin kalıcılığı
+
+#### Kalite Tespiti
+
+**HLS Manifest:**
+```m3u8
+#EXT-X-STREAM-INF:BANDWIDTH=5000000,RESOLUTION=1920x1080
+1080p.m3u8
+#EXT-X-STREAM-INF:BANDWIDTH=2500000,RESOLUTION=1280x720
+720p.m3u8
+#EXT-X-STREAM-INF:BANDWIDTH=1000000,RESOLUTION=854x480
+480p.m3u8
+```
+
+**Çıkarılan VideoQuality:**
+```typescript
+[
+  {
+    label: "1080p",
+    height: 1080,
+    width: 1920,
+    bitrate: 5000000,
+    levelIndex: 0,
+    url: "1080p.m3u8"
+  },
+  {
+    label: "720p",
+    height: 720,
+    width: 1280,
+    bitrate: 2500000,
+    levelIndex: 1,
+    url: "720p.m3u8"
+  },
+  // ...
+]
+```
+
+#### Kalite Değiştirme
+
+**Otomatik Kalite (Adaptive Bitrate):**
+```typescript
+import { setHlsQualityLevel } from '@alper/video-player'
+
+setHlsQualityLevel(hlsInstance, null) // Auto
+```
+
+**Manuel Kalite:**
+```typescript
+setHlsQualityLevel(hlsInstance, {
+  label: "1080p",
+  levelIndex: 0,
+  // ...
+})
+```
+
+#### Kullanım
+
+**Settings Menu'den:**
+Kullanıcı Settings → Quality menüsünden kalite seçer.
+
+**Programmatic Control:**
+```tsx
+import { usePlayerContext } from '@alper/video-player'
+
+function QualitySelector() {
+  const { settings, setQuality } = usePlayerContext()
+  const [qualities] = useState<VideoQuality[]>([...]) // HLS'den alınan
+
+  return (
+    <select
+      value={settings.quality?.label || 'auto'}
+      onChange={(e) => {
+        if (e.target.value === 'auto') {
+          setQuality(null) // Auto
+        } else {
+          const quality = qualities.find(q => q.label === e.target.value)
+          setQuality(quality || null)
+        }
+      }}
+    >
+      <option value="auto">Auto</option>
+      {qualities.map(q => (
+        <option key={q.label} value={q.label}>
+          {q.label} ({(q.bitrate! / 1000000).toFixed(1)} Mbps)
+        </option>
+      ))}
+    </select>
+  )
+}
+```
+
+### Klavye Kısayolları
+
+**Dosya:** `src/hooks/useKeyboardShortcuts.ts`
+
+#### Tüm Kısayollar
+
+| Tuş | Aksiyon | Açıklama |
+|-----|---------|----------|
+| `Space` | Oynat/Duraklat | Videoyu oynatır veya duraklatır |
+| `K` | Oynat/Duraklat | Space ile aynı |
+| `←` (Sol Ok) | -5 saniye | 5 saniye geri sar |
+| `→` (Sağ Ok) | +5 saniye | 5 saniye ileri sar |
+| `J` | -10 saniye | 10 saniye geri sar |
+| `L` | +10 saniye | 10 saniye ileri sar |
+| `↑` (Yukarı Ok) | Ses +10% | Sesi %10 artır |
+| `↓` (Aşağı Ok) | Ses -10% | Sesi %10 azalt |
+| `M` | Sessiz/Sesli | Sesi aç/kapat |
+| `F` | Tam ekran | Tam ekran moduna geç/çık |
+| `P` | PIP | Picture-in-Picture aç/kapat |
+| `0` | 0% | Videonun başına git |
+| `1` | 10% | Videonun %10'una git |
+| `2` | 20% | Videonun %20'sine git |
+| `3` | 30% | Videonun %30'una git |
+| `4` | 40% | Videonun %40'ına git |
+| `5` | 50% | Videonun ortasına git |
+| `6` | 60% | Videonun %60'ına git |
+| `7` | 70% | Videonun %70'ine git |
+| `8` | 80% | Videonun %80'ine git |
+| `9` | 90% | Videonun %90'ına git |
+| `Home` | Başa git | Videonun en başına git |
+| `End` | Sona git | Videonun en sonuna git |
+
+#### Özellikler
+
+- ✅ Input/textarea alanlarında devre dışı
+- ✅ Default tarayıcı davranışını önler
+- ✅ Enable/disable ile açılıp kapatılabilir
+- ✅ Fullscreen'de de çalışır
+
+#### Kullanım
+
+**Otomatik (default):**
+```tsx
+<VideoPlayer src="video.mp4" />
+// Klavye kısayolları otomatik aktif
+```
+
+**Manuel kontrol:**
+```tsx
+<VideoPlayer
+  src="video.mp4"
+  keyboardShortcuts={false} // Devre dışı
+/>
+```
+
+**Custom hook ile:**
+```tsx
+import { useKeyboardShortcuts } from '@alper/video-player'
+
+function MyComponent() {
+  const { videoRef, containerRef } = usePlayerContext()
+
+  useKeyboardShortcuts({
+    videoRef,
+    containerRef,
+    enabled: true
+  })
+
+  // ...
+}
+```
+
+### Dokunmatik Jestler
+
+**Dosya:** `src/hooks/useTouchGestures.ts`
+
+#### Tüm Jestler
+
+| Jest | Aksiyon | Açıklama |
+|------|---------|----------|
+| Tek dokunuş (tap) | Oynat/Duraklat | Videoyu oynatır/duraklatır |
+| Çift dokunuş sol | -10 saniye | 10 saniye geri sar |
+| Çift dokunuş sağ | +10 saniye | 10 saniye ileri sar |
+| Yatay kaydırma (swipe) | Seek | Videoyu ileri/geri sar (max 30s) |
+| Dikey kaydırma (swipe) | Ses | Sesi artır/azalt |
+
+#### Özellikler
+
+- ✅ Tap tespiti (timeout ile)
+- ✅ Double-tap tespit (pozisyon bazlı - sol/sağ)
+- ✅ Görsel geri bildirim animasyonları
+- ✅ Swipe mesafesi hesaplama
+- ✅ Threshold değerleri (minimum hareket mesafesi)
+- ✅ Mobil ve tablet uyumlu
+
+#### Parametreler
+
+**Tap Timeout:** 300ms (çift dokunuş için bekleme süresi)
+**Swipe Threshold:** 50px (minimum swipe mesafesi)
+**Double Tap Zone:** Ekran genişliğinin 1/3'ü (sol/sağ bölge)
+
+#### Görsel Geri Bildirim
+
+**Double Tap Animasyonu:**
+- Sol tarafa çift dokunuş → "« 10s" animasyonu
+- Sağ tarafa çift dokunuş → "10s »" animasyonu
+- 500ms sonra kaybolur
+
+**Seek Feedback:**
+- Swipe sırasında progress bar güncellemesi
+- Seek edilen zamanın gösterimi
+
+#### Kullanım
+
+**Otomatik (mobil cihazlarda):**
+```tsx
+<VideoPlayer src="video.mp4" />
+// Touch jestleri otomatik aktif (touch destekli cihazlarda)
+```
+
+**Custom hook ile:**
+```tsx
+import { useTouchGestures } from '@alper/video-player'
+
+function MyComponent() {
+  const { videoRef, containerRef } = usePlayerContext()
+
+  useTouchGestures({
+    videoRef,
+    containerRef,
+    onGesture: (event) => {
+      console.log('Jest:', event.type, event.direction)
+    }
+  })
+
+  // ...
+}
+```
+
+---
+
+## 📚 API Referansı
+
+### VideoPlayer Props
+
+```typescript
+interface VideoPlayerProps {
+  // Video kaynağı (zorunlu)
+  src: string
+
+  // Poster/thumbnail resmi
+  poster?: string
+
+  // Otomatik oynat
+  autoplay?: boolean
+
+  // Döngü
+  loop?: boolean
+
+  // Başlangıçta sessiz
+  muted?: boolean
+
+  // Kontrolleri göster (default: true)
+  controls?: boolean
+
+  // Altyazı parçaları
+  subtitles?: SubtitleTrack[]
+
+  // Tema özelleştirme
+  theme?: PlayerTheme
+
+  // Dil (i18n için)
+  language?: string
+
+  // Klavye kısayolları (default: true)
+  keyboardShortcuts?: boolean
+
+  // Picture-in-Picture butonu (default: true)
+  pictureInPicture?: boolean
+
+  // CSS class
+  className?: string
+
+  // Inline styles
+  style?: CSSProperties
+
+  // Event handlers
+  onPlay?: () => void
+  onPause?: () => void
+  onEnded?: () => void
+  onTimeUpdate?: (currentTime: number) => void
+  onVolumeChange?: (volume: number) => void
+  onError?: (error: Error) => void
+  onLoadedMetadata?: () => void
+  onSeeking?: () => void
+  onSeeked?: () => void
+}
+```
+
+#### Prop Detayları
+
+**src** (zorunlu)
+- Tip: `string`
+- Video dosyasının URL'i
+- Desteklenen formatlar:
+  - MP4: `https://example.com/video.mp4`
+  - WebM: `https://example.com/video.webm`
+  - HLS: `https://example.com/stream.m3u8`
+  - RTMP: `rtmp://example.com/live/stream`
+  - FLV: `https://example.com/stream.flv`
+
+**poster**
+- Tip: `string | undefined`
+- Video yüklenmeden önce gösterilecek resim
+- Önerilen format: JPG, PNG, WebP
+- Önerilen boyut: Video ile aynı aspect ratio
+
+**autoplay**
+- Tip: `boolean | undefined`
+- Default: `false`
+- NOT: Çoğu tarayıcı, `muted: true` olmadan autoplay'e izin vermez
+
+**loop**
+- Tip: `boolean | undefined`
+- Default: `false`
+- Video bittiğinde başa döner
+
+**muted**
+- Tip: `boolean | undefined`
+- Default: `false`
+- Başlangıçta sessiz moda alır
+
+**controls**
+- Tip: `boolean | undefined`
+- Default: `true`
+- `false` yaparsanız tüm kontroller gizlenir
+
+**subtitles**
+- Tip: `SubtitleTrack[] | undefined`
+- Altyazı parçaları dizisi
+- WebVTT (.vtt) ve SRT (.srt) desteklenir
+
+**theme**
+- Tip: `PlayerTheme | undefined`
+- CSS variable'ları override eder
+- Tüm alanlar opsiyonel
+
+**language**
+- Tip: `string | undefined`
+- Default: Tarayıcı dili
+- Desteklenen: `'en'`, `'tr'`
+
+**keyboardShortcuts**
+- Tip: `boolean | undefined`
+- Default: `true`
+- Klavye kısayollarını aktif/deaktif eder
+
+**pictureInPicture**
+- Tip: `boolean | undefined`
+- Default: `true`
+- PIP butonunu gösterir/gizler
+- Tarayıcı desteği yoksa otomatik gizlenir
+
+**onTimeUpdate**
+- Tip: `(currentTime: number) => void | undefined`
+- Video oynarken sürekli çağrılır (~250ms aralıklarla)
+- Analytics ve progress tracking için kullanışlı
+
+**onError**
+- Tip: `(error: Error) => void | undefined`
+- Video yükleme veya oynatma hatalarında çağrılır
+- CORS hataları için `isCORSError(error)` kullanabilirsiniz
+
+### Type Definitions
+
+#### SubtitleTrack
+
+```typescript
+interface SubtitleTrack {
+  // Altyazı dosyasının URL'i (.vtt veya .srt)
+  src: string
+
+  // Dil kodu (ISO 639-1)
+  lang: string
+
+  // Kullanıcıya gösterilecek etiket
+  label: string
+
+  // Varsayılan altyazı olarak işaretle
+  default?: boolean
+}
+```
+
+**Örnek:**
+```typescript
+const subtitles: SubtitleTrack[] = [
+  {
+    src: '/subtitles/english.vtt',
+    lang: 'en',
+    label: 'English',
+    default: true
+  },
+  {
+    src: '/subtitles/turkish.srt',
+    lang: 'tr',
+    label: 'Türkçe'
+  }
+]
+```
+
+#### AudioTrack
+
+```typescript
+interface AudioTrack {
+  // Ses parçasının adı
+  name: string
+
+  // Dil kodu
+  language: string
+
+  // HLS manifest'teki URL
+  url: string
+
+  // Group ID (HLS)
+  groupId: string
+
+  // Varsayılan parça mı
+  default?: boolean
+
+  // Otomatik seçilsin mi
+  autoselect?: boolean
+}
+```
+
+**Örnek:**
+```typescript
+const audioTrack: AudioTrack = {
+  name: "English Stereo",
+  language: "en",
+  url: "audio_en.m3u8",
+  groupId: "audio",
+  default: true,
+  autoselect: true
+}
+```
+
+#### VideoQuality
+
+```typescript
+interface VideoQuality {
+  // Yükseklik (piksel)
+  height?: number
+
+  // Kullanıcıya gösterilecek etiket (örn: "1080p")
+  label: string
+
+  // Kalite stream URL'i (HLS)
+  url?: string
+
+  // Genişlik (piksel)
+  width?: number
+
+  // Bitrate (bits/second)
+  bitrate?: number
+
+  // HLS.js level index
+  levelIndex?: number
+}
+```
+
+**Örnek:**
+```typescript
+const quality: VideoQuality = {
+  label: "1080p",
+  height: 1080,
+  width: 1920,
+  bitrate: 5000000,
+  levelIndex: 0,
+  url: "1080p.m3u8"
+}
+```
+
+#### PlayerTheme
+
+```typescript
+interface PlayerTheme {
+  // Ana renk (progress bar, butonlar)
+  primaryColor?: string
+
+  // Vurgu rengi (hover states)
+  accentColor?: string
+
+  // Arka plan rengi
+  backgroundColor?: string
+
+  // Metin rengi
+  textColor?: string
+}
+```
+
+**Örnek:**
+```typescript
+const theme: PlayerTheme = {
+  primaryColor: '#ef4444',    // Kırmızı
+  accentColor: '#dc2626',     // Koyu kırmızı
+  backgroundColor: '#000000', // Siyah
+  textColor: '#ffffff'        // Beyaz
+}
+```
+
+#### VideoState
+
+```typescript
+interface VideoState {
+  playing: boolean          // Oynatılıyor mu
+  currentTime: number       // Geçerli zaman (saniye)
+  duration: number          // Toplam süre (saniye)
+  buffered: number          // Buffered zaman (saniye)
+  volume: number            // Ses seviyesi (0-1)
+  muted: boolean            // Sessiz mi
+  playbackRate: number      // Oynatma hızı (0.25-2)
+  fullscreen: boolean       // Tam ekran mı
+  pictureInPicture: boolean // PIP modunda mı
+  loading: boolean          // Yükleniyor mu
+  error: Error | null       // Hata varsa
+  seeking: boolean          // Seek ediliyor mu
+}
+```
+
+#### UIState
+
+```typescript
+interface UIState {
+  controlsVisible: boolean    // Kontroller görünür mü
+  settingsOpen: boolean       // Ayarlar menüsü açık mı
+  volumeControlOpen: boolean  // Ses kontrolü açık mı
+  qualityMenuOpen: boolean    // Kalite menüsü açık mı
+  subtitleMenuOpen: boolean   // Altyazı menüsü açık mı
+}
+```
+
+#### PlayerSettings
+
+```typescript
+interface PlayerSettings {
+  quality: VideoQuality | null       // Seçili kalite (null = auto)
+  subtitle: SubtitleTrack | null     // Seçili altyazı (null = off)
+  audioTrack: AudioTrack | null      // Seçili ses parçası
+  playbackRate: number               // Oynatma hızı
+}
+```
+
+#### PlayerContextValue
+
+```typescript
+interface PlayerContextValue {
+  // State
+  videoState: VideoState
+  uiState: UIState
+  settings: PlayerSettings
+
+  // Refs
+  videoRef: MutableRefObject<HTMLVideoElement | null>
+  containerRef: MutableRefObject<HTMLDivElement | null>
+
+  // Video kontrol fonksiyonları
+  play: () => void
+  pause: () => void
+  togglePlay: () => void
+  seek: (time: number) => void
+  setVolume: (volume: number) => void
+  toggleMute: () => void
+  setPlaybackRate: (rate: number) => void
+
+  // Fullscreen & PIP
+  toggleFullscreen: () => void
+  togglePictureInPicture: () => void
+
+  // UI kontrolleri
+  showControls: () => void
+  hideControls: () => void
+  toggleSettings: () => void
+
+  // Ayarlar
+  setQuality: (quality: VideoQuality | null) => void
+  setSubtitle: (subtitle: SubtitleTrack | null) => void
+  setAudioTrack: (audioTrack: AudioTrack | null) => void
+}
+```
+
+### Exported Components
+
+```typescript
+// Ana bileşen
+import { VideoPlayer } from '@alper/video-player'
+```
+
+### Exported Hooks
+
+```typescript
+// Player context hook
+import { usePlayerContext } from '@alper/video-player'
+
+// Klavye kısayolları hook'u
+import { useKeyboardShortcuts } from '@alper/video-player'
+
+// Dokunmatik jest hook'u
+import { useTouchGestures } from '@alper/video-player'
+```
+
+**usePlayerContext Kullanımı:**
+```tsx
+function CustomControl() {
+  const {
+    videoState,
+    play,
+    pause,
+    seek,
+    setVolume
+  } = usePlayerContext()
+
+  return (
+    <div>
+      <button onClick={play}>Oynat</button>
+      <button onClick={pause}>Duraklat</button>
+      <button onClick={() => seek(30)}>30s İleri</button>
+      <span>{videoState.currentTime}s / {videoState.duration}s</span>
+    </div>
+  )
+}
+
+// PlayerProvider içinde kullanılmalı
+<VideoPlayer src="video.mp4">
+  <CustomControl />
+</VideoPlayer>
+```
+
+### Exported Utilities
+
+```typescript
+// Zaman formatlama
+import { formatTime, parseTime } from '@alper/video-player'
+
+formatTime(125)          // "2:05"
+formatTime(3665)         // "1:01:05"
+parseTime("2:05")        // 125
+parseTime("1:01:05")     // 3665
+
+// Altyazı utilities
+import {
+  parseSRT,
+  createSubtitleBlobURL,
+  fetchSubtitle
+} from '@alper/video-player'
+
+const srtContent = "1\n00:00:01,000 --> 00:00:04,000\nMerhaba"
+const vttContent = parseSRT(srtContent)
+const blobUrl = createSubtitleBlobURL(vttContent)
+const subtitle = await fetchSubtitle('/subtitle.srt')
+
+// CORS helpers
+import {
+  validateVideoURL,
+  getCORSErrorMessage,
+  isCORSError,
+  checkVideoCORS
+} from '@alper/video-player'
+
+const validation = validateVideoURL(url)
+if (!validation.valid) {
+  console.error(validation.error)
+}
+
+const corsCheck = await checkVideoCORS(url)
+if (!corsCheck.supported) {
+  console.error(corsCheck.error)
+}
+
+if (isCORSError(error)) {
+  const message = getCORSErrorMessage(error, videoUrl)
+  console.log(message)
+}
+
+// i18n
+import {
+  getTranslations,
+  detectBrowserLanguage,
+  translations
+} from '@alper/video-player'
+
+const lang = detectBrowserLanguage()    // "tr", "en", vb.
+const t = getTranslations('tr')
+console.log(t.subtitles)                // "Altyazı"
+console.log(translations.tr.quality)    // "Kalite"
+```
+
+---
+
+## 💡 Kullanım Örnekleri
+
+### Temel MP4 Oynatma
+
+```tsx
+import { VideoPlayer } from '@alper/video-player'
+import '@alper/video-player/styles.css'
+
+function App() {
+  return (
+    <VideoPlayer
+      src="https://example.com/video.mp4"
+      poster="https://example.com/poster.jpg"
+    />
+  )
+}
+```
+
+### HLS Streaming ile Altyazı
 
 ```tsx
 <VideoPlayer
-  src="/videos/branded.mp4"
+  src="https://example.com/stream/master.m3u8"
+  subtitles={[
+    {
+      src: '/subtitles/english.vtt',
+      lang: 'en',
+      label: 'English',
+      default: true
+    },
+    {
+      src: '/subtitles/turkish.srt',
+      lang: 'tr',
+      label: 'Türkçe'
+    }
+  ]}
   theme={{
-    primaryColor: '#3b82f6',      // Mavi
-    accentColor: '#2563eb',       // Koyu mavi
-    backgroundColor: '#1e293b',   // Koyu gri
-    textColor: '#f1f5f9'          // Açık gri
+    primaryColor: '#3b82f6',
+    accentColor: '#2563eb'
   }}
 />
 ```
 
-### 7. Türkçe Arayüz
-
-Türkçe dil desteği:
+### Event Tracking
 
 ```tsx
+function VideoWithAnalytics() {
+  const handlePlay = () => {
+    // Analytics gönder
+    analytics.track('video_play')
+  }
+
+  const handleTimeUpdate = (time: number) => {
+    // Her 30 saniyede milestone kaydet
+    if (time % 30 === 0) {
+      analytics.track('video_progress', { seconds: time })
+    }
+  }
+
+  const handleEnded = () => {
+    analytics.track('video_completed')
+  }
+
+  return (
+    <VideoPlayer
+      src="video.mp4"
+      onPlay={handlePlay}
+      onTimeUpdate={handleTimeUpdate}
+      onEnded={handleEnded}
+    />
+  )
+}
+```
+
+### RTMP Live Stream
+
+```tsx
+// HTTP-FLV proxy üzerinden RTMP stream
 <VideoPlayer
-  src="/videos/content.mp4"
-  language="tr"
+  src="https://your-server.com/live/stream.flv"
+  autoplay
+  muted
 />
 ```
 
-### 8. Klavye Kısayolları Devre Dışı
-
-Bazı durumlarda klavye kısayollarını kapatmak isteyebilirsiniz:
+### Custom Kontroller
 
 ```tsx
-<VideoPlayer
-  src="/videos/presentation.mp4"
-  keyboardShortcuts={false}
-/>
+import { VideoPlayer, usePlayerContext } from '@alper/video-player'
+
+function CustomControls() {
+  const {
+    videoState,
+    play,
+    pause,
+    seek,
+    setPlaybackRate
+  } = usePlayerContext()
+
+  return (
+    <div className="custom-controls">
+      {videoState.playing ? (
+        <button onClick={pause}>⏸️ Duraklat</button>
+      ) : (
+        <button onClick={play}>▶️ Oynat</button>
+      )}
+
+      <button onClick={() => seek(videoState.currentTime - 10)}>
+        ⏪ 10s Geri
+      </button>
+
+      <button onClick={() => seek(videoState.currentTime + 10)}>
+        ⏩ 10s İleri
+      </button>
+
+      <select
+        value={videoState.playbackRate}
+        onChange={(e) => setPlaybackRate(Number(e.target.value))}
+      >
+        <option value="0.5">0.5x</option>
+        <option value="1">Normal</option>
+        <option value="1.5">1.5x</option>
+        <option value="2">2x</option>
+      </select>
+
+      <span>
+        {formatTime(videoState.currentTime)} / {formatTime(videoState.duration)}
+      </span>
+    </div>
+  )
+}
+
+function App() {
+  return (
+    <VideoPlayer src="video.mp4">
+      <CustomControls />
+    </VideoPlayer>
+  )
+}
 ```
 
-### 9. Responsive Layout
-
-Farklı ekran boyutlarında:
-
-```tsx
-<div style={{
-  width: '100%',
-  maxWidth: '1200px',
-  margin: '0 auto'
-}}>
-  <VideoPlayer
-    src="/videos/responsive.mp4"
-    style={{
-      width: '100%',
-      aspectRatio: '16/9'
-    }}
-  />
-</div>
-```
-
-### 10. Video Playlist
-
-Sıralı video oynatma:
+### Çoklu Video Playlist
 
 ```tsx
 import { useState } from 'react'
 import { VideoPlayer } from '@alper/video-player'
 
 const videos = [
-  { id: 1, src: '/videos/episode1.mp4', title: 'Bölüm 1' },
-  { id: 2, src: '/videos/episode2.mp4', title: 'Bölüm 2' },
-  { id: 3, src: '/videos/episode3.mp4', title: 'Bölüm 3' },
+  { id: 1, src: 'video1.mp4', title: 'Video 1' },
+  { id: 2, src: 'video2.mp4', title: 'Video 2' },
+  { id: 3, src: 'video3.mp4', title: 'Video 3' },
 ]
 
 function Playlist() {
   const [currentIndex, setCurrentIndex] = useState(0)
+  const currentVideo = videos[currentIndex]
 
   const handleEnded = () => {
     // Sonraki videoya geç
@@ -387,21 +1643,18 @@ function Playlist() {
 
   return (
     <div>
-      <h2>{videos[currentIndex].title}</h2>
       <VideoPlayer
-        key={videos[currentIndex].id}
-        src={videos[currentIndex].src}
+        key={currentVideo.id}
+        src={currentVideo.src}
         onEnded={handleEnded}
       />
 
-      <div style={{ marginTop: '20px' }}>
+      <div className="playlist">
         {videos.map((video, index) => (
           <button
             key={video.id}
             onClick={() => setCurrentIndex(index)}
-            style={{
-              fontWeight: index === currentIndex ? 'bold' : 'normal'
-            }}
+            className={index === currentIndex ? 'active' : ''}
           >
             {video.title}
           </button>
@@ -412,203 +1665,47 @@ function Playlist() {
 }
 ```
 
----
-
-## ⌨️ Klavye Kısayolları
-
-Video player, kullanıcı deneyimini geliştirmek için kapsamlı klavye desteği sunar:
-
-| Tuş | Aksiyon |
-|-----|---------|
-| `Space` veya `K` | Oynat/Duraklat |
-| `←` (Sol Ok) | 5 saniye geri sar |
-| `→` (Sağ Ok) | 5 saniye ileri sar |
-| `J` | 10 saniye geri sar |
-| `L` | 10 saniye ileri sar |
-| `↑` (Yukarı Ok) | Ses seviyesini artır (%5) |
-| `↓` (Aşağı Ok) | Ses seviyesini azalt (%5) |
-| `M` | Sessiz/Sesli |
-| `F` | Tam ekran aç/kapat |
-| `P` | Picture-in-Picture |
-| `0` | Başa dön (%0) |
-| `1-9` | İlgili yüzdeye atla (%10-%90) |
-| `Home` | Başa dön |
-| `End` | Sona git |
-| `<` | Oynatma hızını azalt (0.25x) |
-| `>` | Oynatma hızını artır (0.25x) |
-
-**Not:** Klavye kısayolları sadece video player'a focus edildiğinde çalışır.
-
----
-
-## 📱 Touch Gesture'lar
-
-Mobil cihazlarda kullanıcı deneyimini geliştiren touch gesture'lar:
-
-### Temel Gesture'lar
-
-- **Tek Dokunuş**: Oynat/Duraklat
-- **Çift Dokunuş (Sol)**: 10 saniye geri sar
-- **Çift Dokunuş (Sağ)**: 10 saniye ileri sar
-
-### Swipe Gesture'ları
-
-- **Sağa Kaydır**: İleri sar (kaydırma mesafesine göre)
-- **Sola Kaydır**: Geri sar (kaydırma mesafesine göre)
-- **Yukarı Kaydır**: Ses seviyesini artır
-- **Aşağı Kaydır**: Ses seviyesini azalt
-
-### Pinch & Zoom
-
-- **Pinch**: Video zoom (bazı tarayıcılarda)
-
----
-
-## 🎨 Stil ve Özelleştirme
-
-### CSS Değişkenleri
-
-Video player, CSS değişkenleri kullanarak kolayca özelleştirilebilir. İşte tüm değişkenler:
-
-```css
-:root {
-  /* Ana Renkler */
-  --player-primary: #ef4444;              /* Ana renk */
-  --player-primary-hover: #dc2626;        /* Hover rengi */
-  --player-primary-active: #b91c1c;       /* Active rengi */
-  --player-primary-light: rgba(239, 68, 68, 0.2); /* Açık renk */
-
-  /* Arkaplan Renkleri */
-  --player-bg: #000000;                   /* Ana arkaplan */
-  --player-bg-controls: rgba(0, 0, 0, 0.85); /* Kontrol paneli */
-  --player-bg-overlay: rgba(0, 0, 0, 0.6);   /* Overlay */
-  --player-bg-menu: rgba(20, 20, 20, 0.95);  /* Menu arkaplan */
-
-  /* Yazı Renkleri */
-  --player-text: #ffffff;                 /* Ana yazı */
-  --player-text-secondary: #d1d5db;       /* İkincil yazı */
-  --player-text-muted: #9ca3af;           /* Soluk yazı */
-
-  /* Kenarlık & Ayırıcı */
-  --player-border: #374151;
-  --player-divider: rgba(255, 255, 255, 0.1);
-
-  /* Progress & Buffered */
-  --player-buffered: rgba(239, 68, 68, 0.3);
-  --player-progress-bg: rgba(255, 255, 255, 0.3);
-
-  /* Gölgeler */
-  --player-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  --player-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-  --player-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-
-  /* Geçişler */
-  --player-transition-fast: 150ms;
-  --player-transition-normal: 250ms;
-  --player-transition-slow: 400ms;
-
-  /* Z-index */
-  --player-z-video: 1;
-  --player-z-subtitle: 10;
-  --player-z-controls: 20;
-  --player-z-menu: 30;
-  --player-z-loading: 40;
-
-  /* Boşluklar */
-  --player-spacing-xs: 6px;
-  --player-spacing-sm: 10px;
-  --player-spacing-md: 14px;
-  --player-spacing-lg: 20px;
-  --player-spacing-xl: 28px;
-
-  /* Border Radius */
-  --player-radius-sm: 4px;
-  --player-radius-md: 6px;
-  --player-radius-lg: 8px;
-  --player-radius-full: 9999px;
-
-  /* İkon Boyutları */
-  --player-icon-sm: 20px;
-  --player-icon-md: 28px;
-  --player-icon-lg: 36px;
-  --player-icon-xl: 56px;
-}
-```
-
-### Tema Özelleştirme Örnekleri
-
-#### Koyu Mavi Tema
-
-```css
-:root {
-  --player-primary: #3b82f6;
-  --player-primary-hover: #2563eb;
-  --player-primary-active: #1d4ed8;
-  --player-bg: #0f172a;
-}
-```
+### CORS Hata Yönetimi
 
 ```tsx
-// veya JavaScript ile
-<VideoPlayer
-  src="/videos/demo.mp4"
-  theme={{
-    primaryColor: '#3b82f6',
-    accentColor: '#2563eb',
-    backgroundColor: '#0f172a',
-    textColor: '#f1f5f9'
-  }}
-/>
-```
+import { VideoPlayer, isCORSError, getCORSErrorMessage } from '@alper/video-player'
+import { useState } from 'react'
 
-#### Yeşil Tema
+function VideoWithCORSHandling() {
+  const [error, setError] = useState<string | null>(null)
+  const videoUrl = 'https://example.com/video.mp4'
 
-```css
-:root {
-  --player-primary: #10b981;
-  --player-primary-hover: #059669;
-  --player-primary-active: #047857;
-}
-```
+  const handleError = (err: Error) => {
+    if (isCORSError(err)) {
+      const message = getCORSErrorMessage(err, videoUrl)
+      setError(message)
+      console.error('CORS Hatası:', message)
+    } else {
+      setError(err.message)
+    }
+  }
 
-#### Mor Tema
+  return (
+    <div>
+      <VideoPlayer
+        src={videoUrl}
+        onError={handleError}
+      />
 
-```css
-:root {
-  --player-primary: #8b5cf6;
-  --player-primary-hover: #7c3aed;
-  --player-primary-active: #6d28d9;
-}
-```
-
-### Özel CSS ile Özelleştirme
-
-Daha fazla kontrol için özel CSS yazabilirsiniz:
-
-```css
-/* Video player container boyutu */
-.video-player {
-  max-width: 1200px;
-  margin: 0 auto;
-  border-radius: 12px;
-  overflow: hidden;
-  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
-}
-
-/* Kontrol paneli opacity */
-.video-controls {
-  background: rgba(0, 0, 0, 0.95) !important;
-}
-
-/* Progress bar yüksekliği */
-.progress-bar {
-  height: 6px !important;
-}
-
-/* Button boyutları */
-.control-button {
-  width: 48px !important;
-  height: 48px !important;
+      {error && (
+        <div className="error-message">
+          <h3>Video Yükleme Hatası</h3>
+          <p>{error}</p>
+          <p>Çözüm: Video sunucunuzda CORS headers ekleyin:</p>
+          <pre>
+            Access-Control-Allow-Origin: *{'\n'}
+            Access-Control-Allow-Methods: GET, HEAD{'\n'}
+            Access-Control-Allow-Headers: Range
+          </pre>
+        </div>
+      )}
+    </div>
+  )
 }
 ```
 
@@ -616,732 +1713,897 @@ Daha fazla kontrol için özel CSS yazabilirsiniz:
 
 ## 🔧 Gelişmiş Kullanım
 
-### Context API ile Video Kontrolü
+### Feature Detection
 
-Video player'ın context'ini kullanarak programatik kontrol:
+```typescript
+import {
+  hasNativeHLS,
+  hasMSE,
+  hasPIP,
+  hasFullscreen,
+  hasTouch,
+  isIOSSafari,
+  hasVolumeControl
+} from '@alper/video-player'
+
+// Safari'de native HLS var mı kontrol et
+if (hasNativeHLS()) {
+  console.log('Native HLS destekleniyor')
+}
+
+// MSE desteği kontrol et (HLS.js için gerekli)
+if (hasMSE()) {
+  console.log('HLS.js kullanılabilir')
+}
+
+// PIP desteği kontrol et
+if (hasPIP()) {
+  console.log('Picture-in-Picture kullanılabilir')
+}
+
+// iOS Safari kontrolü
+if (isIOSSafari()) {
+  console.log('iOS Safari - volume control yok')
+}
+
+// Ses kontrolü desteği
+if (hasVolumeControl()) {
+  // Volume slider göster
+} else {
+  // Volume slider gizle (iOS)
+}
+```
+
+### Manual HLS.js Setup
+
+```typescript
+import { loadHls, setupHls } from '@alper/video-player'
+
+async function customHlsSetup() {
+  const videoElement = document.querySelector('video')
+  const Hls = await loadHls()
+
+  if (Hls) {
+    const { instance, cleanup } = setupHls(
+      Hls,
+      videoElement,
+      'https://example.com/stream.m3u8',
+      {
+        onManifestParsed: (qualities, audioTracks, subtitles) => {
+          console.log('Qualities:', qualities)
+          console.log('Audio tracks:', audioTracks)
+          console.log('Subtitles:', subtitles)
+        },
+        onError: (error) => {
+          console.error('HLS error:', error)
+        }
+      }
+    )
+
+    // instance → hls.js instance
+    // cleanup → cleanup function (unmount'ta çağır)
+
+    return { instance, cleanup }
+  }
+}
+```
+
+### Custom Subtitle Processing
+
+```typescript
+import { parseSRT, createSubtitleBlobURL, fetchSubtitle } from '@alper/video-player'
+
+async function loadCustomSubtitle(url: string) {
+  // SRT dosyasını fetch et
+  const srtContent = await fetchSubtitle(url)
+
+  // VTT'ye dönüştür
+  const vttContent = parseSRT(srtContent)
+
+  // Blob URL oluştur
+  const blobUrl = createSubtitleBlobURL(vttContent)
+
+  // Video elementine ekle
+  const track = document.createElement('track')
+  track.kind = 'subtitles'
+  track.label = 'Custom'
+  track.srclang = 'en'
+  track.src = blobUrl
+
+  videoElement.appendChild(track)
+
+  // Cleanup
+  return () => URL.revokeObjectURL(blobUrl)
+}
+```
+
+### Progressive Download Monitoring
 
 ```tsx
-import { VideoPlayer, usePlayerContext, PlayerProvider } from '@alper/video-player'
+function VideoWithProgress() {
+  const [buffered, setBuffered] = useState(0)
+  const { videoRef } = usePlayerContext()
 
-function VideoControls() {
-  const {
-    play,
-    pause,
-    seek,
-    setVolume,
-    toggleFullscreen,
-    videoState
-  } = usePlayerContext()
+  useEffect(() => {
+    const video = videoRef.current
+    if (!video) return
+
+    const updateBuffer = () => {
+      if (video.buffered.length > 0) {
+        const bufferedEnd = video.buffered.end(video.buffered.length - 1)
+        setBuffered((bufferedEnd / video.duration) * 100)
+      }
+    }
+
+    video.addEventListener('progress', updateBuffer)
+    return () => video.removeEventListener('progress', updateBuffer)
+  }, [videoRef])
 
   return (
     <div>
-      <button onClick={play}>Oynat</button>
-      <button onClick={pause}>Duraklat</button>
-      <button onClick={() => seek(30)}>30. saniyeye git</button>
-      <button onClick={() => setVolume(0.5)}>%50 ses</button>
-      <button onClick={toggleFullscreen}>Tam Ekran</button>
-
-      <p>Oynatılıyor: {videoState.playing ? 'Evet' : 'Hayır'}</p>
-      <p>Süre: {videoState.duration}s</p>
-      <p>Mevcut: {videoState.currentTime}s</p>
+      <VideoPlayer src="large-video.mp4" />
+      <div className="buffer-indicator">
+        Buffer: {buffered.toFixed(0)}%
+      </div>
     </div>
   )
 }
-
-function App() {
-  return (
-    <PlayerProvider>
-      <VideoPlayer src="/video.mp4" />
-      <VideoControls />
-    </PlayerProvider>
-  )
-}
-```
-
-### Custom Hook'lar Kullanımı
-
-Kendi player'ınızı oluşturmak için hook'ları kullanabilirsiniz:
-
-```tsx
-import { useKeyboardShortcuts, useTouchGestures } from '@alper/video-player'
-
-function CustomPlayer() {
-  const videoRef = useRef<HTMLVideoElement>(null)
-
-  // Klavye kısayollarını ekle
-  useKeyboardShortcuts(videoRef, {
-    onPlayPause: () => {
-      if (videoRef.current?.paused) {
-        videoRef.current?.play()
-      } else {
-        videoRef.current?.pause()
-      }
-    },
-    onSeek: (seconds) => {
-      if (videoRef.current) {
-        videoRef.current.currentTime += seconds
-      }
-    }
-  })
-
-  // Touch gesture'ları ekle
-  useTouchGestures(videoRef, {
-    onDoubleTapLeft: () => console.log('Geri sar'),
-    onDoubleTapRight: () => console.log('İleri sar'),
-  })
-
-  return <video ref={videoRef} src="/video.mp4" />
-}
-```
-
-### Altyazı İşlemleri
-
-Altyazıları programatik olarak işleme:
-
-```tsx
-import { parseSRT, createSubtitleBlobURL, fetchSubtitle } from '@alper/video-player'
-
-// SRT dosyasını VTT'ye dönüştür
-async function convertSRTtoVTT(srtUrl: string) {
-  const srtContent = await fetch(srtUrl).then(r => r.text())
-  const vttContent = parseSRT(srtContent)
-  const blobUrl = createSubtitleBlobURL(vttContent)
-  return blobUrl
-}
-
-// Altyazıyı fetch et ve kullan
-async function loadSubtitle(url: string) {
-  const subtitle = await fetchSubtitle(url)
-  console.log(subtitle)
-}
-```
-
-### CORS Kontrolü
-
-Video URL'lerini yüklemeden önce CORS kontrolü:
-
-```tsx
-import { validateVideoURL, checkVideoCORS } from '@alper/video-player'
-
-async function loadVideo(url: string) {
-  // URL validasyonu
-  const validation = validateVideoURL(url)
-  if (!validation.valid) {
-    alert(`Geçersiz URL: ${validation.error}`)
-    return
-  }
-
-  // CORS kontrolü
-  const corsCheck = await checkVideoCORS(url)
-  if (!corsCheck.supported) {
-    console.error('CORS hatası:', corsCheck.error)
-
-    if (corsCheck.needsProxy) {
-      console.log('Proxy gerekiyor')
-      // Proxy kullanarak yükle
-    }
-    return
-  }
-
-  // Güvenli şekilde yükle
-  return <VideoPlayer src={url} />
-}
-```
-
-### Zaman Formatı Yardımcıları
-
-```tsx
-import { formatTime, parseTime } from '@alper/video-player'
-
-// Saniyeyi formatla
-formatTime(125)      // "02:05"
-formatTime(3661)     // "01:01:01"
-
-// Formatlanmış zamanı saniyeye çevir
-parseTime("02:05")   // 125
-parseTime("01:01:01") // 3661
 ```
 
 ---
 
-## 🌍 Çoklu Dil Desteği (i18n)
+## 🎨 Tema ve Özelleştirme
 
-Video player İngilizce ve Türkçe dil desteği ile gelir.
+### CSS Variables
 
-### Dil Değiştirme
+Tüm tema CSS değişkenleri ile özelleştirilebilir:
 
-```tsx
-// Türkçe arayüz
-<VideoPlayer
-  src="/video.mp4"
-  language="tr"
-/>
+```css
+:root {
+  /* Ana renkler */
+  --player-primary: #ef4444;
+  --player-primary-hover: #dc2626;
+  --player-bg: #000000;
+  --player-text: #ffffff;
 
-// İngilizce arayüz
-<VideoPlayer
-  src="/video.mp4"
-  language="en"
-/>
-```
+  /* Spacing */
+  --player-spacing-xs: 4px;
+  --player-spacing-sm: 8px;
+  --player-spacing-md: 12px;
+  --player-spacing-lg: 16px;
 
-### Özel Çeviriler
+  /* Border radius */
+  --player-radius: 14px;
+  --player-radius-sm: 8px;
 
-Kendi çevirilerinizi eklemek için:
+  /* Transitions */
+  --player-transition-fast: 120ms;
+  --player-transition-normal: 200ms;
+  --player-transition-slow: 300ms;
 
-```tsx
-import { translations, getTranslations } from '@alper/video-player'
-
-// Mevcut çevirileri genişlet
-translations.tr.customKey = 'Özel metin'
-translations.en.customKey = 'Custom text'
-
-// Çevirileri kullan
-const t = getTranslations('tr')
-console.log(t.play)  // "Oynat"
-console.log(t.pause) // "Duraklat"
-```
-
-### Desteklenen Diller
-
-| Dil | Kod | Durum |
-|-----|-----|-------|
-| Türkçe | `tr` | ✅ Tam destek |
-| İngilizce | `en` | ✅ Tam destek |
-
----
-
-## 🎯 HLS Streaming Detayları
-
-### Otomatik HLS Algılama
-
-Video player, `.m3u8` uzantılı dosyaları otomatik algılar ve hls.js'i yükler:
-
-```tsx
-<VideoPlayer
-  src="https://example.com/stream/playlist.m3u8"
-/>
-```
-
-### Manuel HLS Kontrolü
-
-```tsx
-import Hls from 'hls.js'
-
-// HLS desteğini kontrol et
-if (Hls.isSupported()) {
-  console.log('HLS destekleniyor (hls.js ile)')
-} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
-  console.log('Native HLS destekleniyor (Safari)')
+  /* Z-index layers */
+  --player-z-video: 1;
+  --player-z-overlay: 10;
+  --player-z-controls: 20;
+  --player-z-menu: 30;
+  --player-z-loading: 40;
 }
 ```
 
-### HLS Kalite Seçimi
-
-HLS stream'inde kalite seçimi otomatik olarak aktif olur:
+### Custom Theme Örneği
 
+**Mavi Tema:**
 ```tsx
 <VideoPlayer
-  src="https://example.com/stream/playlist.m3u8"
-  // Kalite menüsü otomatik görünecek
-/>
-```
-
-### HLS Hata Yönetimi
-
-```tsx
-<VideoPlayer
-  src="https://example.com/stream/playlist.m3u8"
-  onError={(error) => {
-    console.error('HLS hatası:', error)
-    // Fallback video göster
+  src="video.mp4"
+  theme={{
+    primaryColor: '#3b82f6',
+    accentColor: '#2563eb',
+    backgroundColor: '#1e293b',
+    textColor: '#f1f5f9'
   }}
 />
 ```
 
----
-
-## 📱 Responsive Tasarım
-
-### Mobil Uyumluluk
-
-Video player mobil cihazlarda mükemmel çalışır:
-
+**Yeşil Tema:**
 ```tsx
-<div className="mobile-container">
-  <VideoPlayer
-    src="/videos/mobile.mp4"
-    // Mobil cihazlarda touch gesture'lar otomatik aktif
-  />
-</div>
-```
-
-```css
-.mobile-container {
-  width: 100%;
-  padding: 0;
-}
-
-/* Mobil için özel ayarlar */
-@media (max-width: 768px) {
-  .video-player {
-    border-radius: 0;
-  }
-
-  .video-controls {
-    padding: 8px !important;
-  }
-}
-```
-
-### Aspect Ratio Koruması
-
-```tsx
-<div style={{
-  width: '100%',
-  aspectRatio: '16/9',
-  backgroundColor: '#000'
-}}>
-  <VideoPlayer
-    src="/video.mp4"
-    style={{ width: '100%', height: '100%' }}
-  />
-</div>
-```
-
-### Grid Layout ile Çoklu Video
-
-```css
-.video-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: 20px;
-  padding: 20px;
-}
-```
-
-```tsx
-<div className="video-grid">
-  <VideoPlayer src="/video1.mp4" />
-  <VideoPlayer src="/video2.mp4" />
-  <VideoPlayer src="/video3.mp4" />
-  <VideoPlayer src="/video4.mp4" />
-</div>
-```
-
----
-
-## ⚠️ Dikkat Edilmesi Gerekenler
-
-### 1. CORS (Cross-Origin Resource Sharing)
-
-Video dosyaları farklı bir domain'de ise CORS header'ları gereklidir:
-
-```
-Access-Control-Allow-Origin: *
-Access-Control-Allow-Methods: GET, HEAD, OPTIONS
-Access-Control-Allow-Headers: Range
-```
-
-**Çözüm:**
-- Sunucunuzda CORS'u etkinleştirin
-- CDN kullanıyorsanız CORS ayarlarını yapın
-- Veya proxy sunucu kullanın
-
-### 2. Otomatik Oynatma Kısıtlamaları
-
-Modern tarayıcılar, kullanıcı etkileşimi olmadan otomatik oynatmayı engelleyebilir:
-
-```tsx
-// Otomatik oynatma için sessiz gereklidir
 <VideoPlayer
-  src="/video.mp4"
-  autoplay
-  muted  // Önemli!
+  src="video.mp4"
+  theme={{
+    primaryColor: '#10b981',
+    accentColor: '#059669',
+    backgroundColor: '#064e3b',
+    textColor: '#ecfdf5'
+  }}
 />
 ```
 
-### 3. iOS Safari Davranışları
-
-iOS Safari'de bazı özel durumlar vardır:
-
-- Fullscreen native player'ı açar
-- Volume kontrolü çalışmaz (sistem ses seviyesi kullanılır)
-- Otomatik oynatma kısıtlamaları daha katıdır
-
+**Dark Theme:**
 ```tsx
-import { features } from '@alper/video-player'
+<VideoPlayer
+  src="video.mp4"
+  theme={{
+    primaryColor: '#8b5cf6',
+    accentColor: '#7c3aed',
+    backgroundColor: '#18181b',
+    textColor: '#fafafa'
+  }}
+/>
+```
 
-if (features.isIOSSafari()) {
-  console.log('iOS Safari tespit edildi')
-  // iOS spesifik ayarlamalar
+### CSS Override ile Özelleştirme
+
+```css
+/* Progress bar yüksekliğini artır */
+.video-player .progress-bar {
+  height: 8px !important;
 }
 
-if (!features.hasVolumeControl()) {
-  // Volume kontrolünü gizle
+/* Kontrol butonlarını büyüt */
+.video-player .control-button {
+  width: 48px !important;
+  height: 48px !important;
+}
+
+/* Loading spinner rengini değiştir */
+.video-player .loading-spinner {
+  border-color: #10b981 transparent transparent transparent !important;
+}
+
+/* Settings menü arka planı */
+.video-player .settings-menu {
+  background: rgba(30, 41, 59, 0.95) !important;
+  backdrop-filter: blur(10px) !important;
 }
 ```
 
-### 4. Büyük Video Dosyaları
+### Responsive Design
 
-Büyük video dosyaları için HTTP Range Request desteği önemlidir:
+```css
+/* Mobil cihazlar için özelleştirme */
+@media (max-width: 768px) {
+  .video-player {
+    --player-spacing-md: 8px;
+    --player-radius: 8px;
+  }
 
-```
-Accept-Ranges: bytes
-Content-Range: bytes 0-1024/5242880
-```
+  .video-player .control-button {
+    width: 40px;
+    height: 40px;
+  }
 
-### 5. HLS.js Yükleme
+  .video-player .time-display {
+    font-size: 12px;
+  }
+}
 
-HLS.js optional dependency olarak eklenmiştir. NPM'den yüklenemezse CDN'den otomatik yüklenir.
+/* Tablet için */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .video-player {
+    --player-spacing-md: 10px;
+  }
+}
 
-**Manuel kurulum:**
-```bash
-npm install hls.js
-```
-
-### 6. Performance İpuçları
-
-```tsx
-// ❌ Kötü: Her render'da yeni object
-<VideoPlayer theme={{ primaryColor: '#ff0000' }} />
-
-// ✅ İyi: Dışarıda tanımla
-const theme = { primaryColor: '#ff0000' }
-<VideoPlayer theme={theme} />
-
-// ✅ Daha iyi: useMemo kullan
-const theme = useMemo(() => ({
-  primaryColor: '#ff0000'
-}), [])
-<VideoPlayer theme={theme} />
-```
-
-### 7. Memory Leak Önleme
-
-Component unmount olduğunda player otomatik temizlenir. Manuel cleanup gerekmez.
-
-### 8. TypeScript Strict Mode
-
-TypeScript strict mode ile tam uyumludur:
-
-```typescript
-import type { VideoPlayerProps } from '@alper/video-player'
-
-const props: VideoPlayerProps = {
-  src: 'video.mp4',
-  // TypeScript tüm prop'ları kontrol eder
+/* Desktop için */
+@media (min-width: 1025px) {
+  .video-player {
+    --player-spacing-md: 12px;
+  }
 }
 ```
 
 ---
 
-## 🧪 Test ve Hata Ayıklama
+## 🌍 Uluslararasılaştırma (i18n)
 
-### Hata Yakalama
+### Desteklenen Diller
+
+- **English (en)** - Varsayılan
+- **Turkish (tr)** - Türkçe
+
+### Otomatik Dil Tespiti
 
 ```tsx
-function SafePlayer() {
-  const [error, setError] = useState<Error | null>(null)
+// Tarayıcı dilini otomatik tespit eder
+<VideoPlayer src="video.mp4" />
+```
 
-  if (error) {
-    return (
-      <div className="error-message">
-        <h3>Video yüklenemedi</h3>
-        <p>{error.message}</p>
-        <button onClick={() => setError(null)}>Tekrar Dene</button>
-      </div>
-    )
+### Manuel Dil Seçimi
+
+```tsx
+// Türkçe zorla
+<VideoPlayer src="video.mp4" language="tr" />
+
+// İngilizce zorla
+<VideoPlayer src="video.mp4" language="en" />
+```
+
+### Translation Keys
+
+```typescript
+interface Translations {
+  noSubtitlesAvailable: string  // "No subtitles available" / "Altyazı mevcut değil"
+  subtitles: string             // "Subtitles" / "Altyazı"
+  off: string                   // "Off" / "Kapalı"
+  auto: string                  // "Auto" / "Otomatik"
+  quality: string               // "Quality" / "Kalite"
+  speed: string                 // "Speed" / "Hız"
+  normal: string                // "Normal" / "Normal"
+  default: string               // "Default" / "Varsayılan"
+  audioTrack: string            // "Audio Track" / "Ses"
+  settings: string              // "Settings" / "Ayarlar"
+  level: string                 // "Level" / "Seviye"
+}
+```
+
+### Programmatic Access
+
+```typescript
+import { getTranslations, detectBrowserLanguage } from '@alper/video-player'
+
+// Tarayıcı dilini tespit et
+const browserLang = detectBrowserLanguage() // "tr", "en-US", vb.
+
+// Translation'ları al
+const t = getTranslations('tr')
+console.log(t.subtitles)  // "Altyazı"
+console.log(t.quality)    // "Kalite"
+
+// Fallback ile
+const t2 = getTranslations('fr') // Fransızca yok
+console.log(t2.subtitles)  // "Subtitles" (İngilizce fallback)
+```
+
+### Yeni Dil Ekleme
+
+`src/i18n/index.ts` dosyasını düzenleyin:
+
+```typescript
+export const translations: Record<string, Translations> = {
+  en: { /* ... */ },
+  tr: { /* ... */ },
+  // Yeni dil ekle
+  es: {
+    noSubtitlesAvailable: 'No hay subtítulos disponibles',
+    subtitles: 'Subtítulos',
+    off: 'Desactivado',
+    auto: 'Automático',
+    quality: 'Calidad',
+    speed: 'Velocidad',
+    normal: 'Normal',
+    default: 'Predeterminado',
+    audioTrack: 'Pista de audio',
+    settings: 'Configuración',
+    level: 'Nivel',
   }
+}
+```
+
+---
+
+## ⚡ Performans
+
+### Bundle Size
+
+| Component | Size (gzipped) |
+|-----------|----------------|
+| Core library | ~8KB |
+| CSS | ~7KB |
+| **Total** | **~15KB** |
+| HLS.js (lazy) | ~200KB |
+| FLV.js (lazy) | ~150KB |
+
+### Optimizasyon Teknikleri
+
+1. **Lazy Loading**
+   - HLS.js ve FLV.js sadece ihtiyaç duyulduğunda yüklenir
+   - Settings menü lazy-loaded
+   - CDN fallback ile yükleme garantisi
+
+2. **Tree Shaking**
+   - ES Module format
+   - Kullanılmayan kod elimine edilir
+   - Named exports ile selective import
+
+3. **Code Splitting**
+   - Async component loading
+   - Dynamic imports
+   - Route-based splitting için hazır
+
+4. **CSS Optimization**
+   - CSS minification
+   - Tek dosyada bundle
+   - CSS-only animasyonlar (JS yok)
+   - Critical CSS inline (opsiyonel)
+
+5. **React Optimization**
+   - React.memo kullanımı
+   - useCallback/useMemo
+   - Gereksiz re-render önleme
+   - Event delegation
+
+6. **Memory Management**
+   - Proper cleanup (useEffect return)
+   - Blob URL revocation
+   - HLS/FLV instance destroy
+   - Event listener removal
+
+### Performance Monitoring
+
+```tsx
+import { useEffect } from 'react'
+import { VideoPlayer } from '@alper/video-player'
+
+function MonitoredVideo() {
+  useEffect(() => {
+    // Bundle size monitoring
+    console.log('Initial bundle loaded')
+
+    // Measure loading time
+    const start = performance.now()
+
+    return () => {
+      const end = performance.now()
+      console.log(`Player active for ${end - start}ms`)
+    }
+  }, [])
 
   return (
     <VideoPlayer
-      src="/video.mp4"
-      onError={(err) => {
-        console.error('Video hatası:', err)
-        setError(err)
+      src="video.mp4"
+      onLoadedMetadata={() => {
+        console.log('Video metadata loaded')
       }}
     />
   )
 }
 ```
 
-### Loading State
-
-```tsx
-function PlayerWithLoading() {
-  const [loading, setLoading] = useState(true)
-
-  return (
-    <div style={{ position: 'relative' }}>
-      {loading && (
-        <div className="loading-overlay">
-          Yükleniyor...
-        </div>
-      )}
-      <VideoPlayer
-        src="/video.mp4"
-        onLoadedMetadata={() => setLoading(false)}
-      />
-    </div>
-  )
-}
-```
-
-### Console Debug
-
-```tsx
-<VideoPlayer
-  src="/video.mp4"
-  onPlay={() => console.log('[DEBUG] Play')}
-  onPause={() => console.log('[DEBUG] Pause')}
-  onTimeUpdate={(t) => console.log('[DEBUG] Time:', t)}
-  onError={(e) => console.error('[DEBUG] Error:', e)}
-  onLoadedMetadata={() => console.log('[DEBUG] Metadata loaded')}
-/>
-```
-
----
-
-## 📊 Browser Desteği
-
-| Browser | Versiyon | Destek |
-|---------|----------|--------|
-| Chrome | 90+ | ✅ Tam |
-| Firefox | 88+ | ✅ Tam |
-| Safari | 14+ | ✅ Tam |
-| Edge | 90+ | ✅ Tam |
-| Opera | 76+ | ✅ Tam |
-| iOS Safari | 14+ | ✅ Tam |
-| Chrome Mobile | 90+ | ✅ Tam |
-| Samsung Internet | 15+ | ✅ Tam |
-
-### Feature Desteği
-
-| Özellik | Chrome | Firefox | Safari | Edge |
-|---------|--------|---------|--------|------|
-| HLS | ✅* | ✅* | ✅ | ✅* |
-| PIP | ✅ | ✅ | ✅ | ✅ |
-| Fullscreen | ✅ | ✅ | ✅ | ✅ |
-| Subtitles | ✅ | ✅ | ✅ | ✅ |
-| Touch | ✅ | ✅ | ✅ | ✅ |
-
-*hls.js ile desteklenir (Safari'de native)
-
----
-
-## 🚀 Production Deployment
-
-### Build Optimizasyonu
-
-```bash
-# Production build
-npm run build:lib
-
-# Bundle boyutunu kontrol et
-npm run build:lib -- --mode production
-
-# Gzip sıkıştırma ile
-gzip -k dist/video-player.js
-```
-
-### CDN Kullanımı
-
-```html
-<!-- UMD build -->
-<script src="https://unpkg.com/@alper/video-player@latest/dist/video-player.umd.cjs"></script>
-<link rel="stylesheet" href="https://unpkg.com/@alper/video-player@latest/dist/video-player.css">
-
-<script>
-  const { VideoPlayer } = window.VideoPlayer
-  // Kullan
-</script>
-```
-
-### Lazy Loading
+### Loading Strategy
 
 ```tsx
+// Lazy load player component
 import { lazy, Suspense } from 'react'
 
 const VideoPlayer = lazy(() =>
-  import('@alper/video-player').then(m => ({ default: m.VideoPlayer }))
+  import('@alper/video-player').then(module => ({
+    default: module.VideoPlayer
+  }))
 )
 
 function App() {
   return (
-    <Suspense fallback={<div>Video player yükleniyor...</div>}>
-      <VideoPlayer src="/video.mp4" />
+    <Suspense fallback={<div>Loading player...</div>}>
+      <VideoPlayer src="video.mp4" />
     </Suspense>
   )
 }
 ```
 
-### Code Splitting
+---
+
+## 🌐 Tarayıcı Uyumluluğu
+
+### Desteklenen Tarayıcılar
+
+| Tarayıcı | Versiyon | MP4 | HLS | RTMP/FLV | PIP | Fullscreen |
+|----------|----------|-----|-----|----------|-----|------------|
+| Chrome | 90+ | ✅ | ✅ | ✅ | ✅ | ✅ |
+| Edge | 90+ | ✅ | ✅ | ✅ | ✅ | ✅ |
+| Firefox | 88+ | ✅ | ✅ | ✅ | ❌ | ✅ |
+| Safari | 14+ | ✅ | ✅ (native) | ❌ | ✅ | ✅ |
+| iOS Safari | 14+ | ✅ | ✅ (native) | ❌ | ✅ | ✅ |
+| Chrome Mobile | 90+ | ✅ | ✅ | ✅ | ✅ | ✅ |
+
+### Feature Support Matrix
+
+| Özellik | Desktop | Mobile | Safari | iOS |
+|---------|---------|--------|--------|-----|
+| MP4/WebM | ✅ | ✅ | ✅ | ✅ |
+| HLS (native) | ❌ | ❌ | ✅ | ✅ |
+| HLS (hls.js) | ✅ | ✅ | ❌ | ❌ |
+| RTMP/FLV | ✅ | ✅ | ❌ | ❌ |
+| Subtitles | ✅ | ✅ | ✅ | ✅ |
+| Quality switching | ✅ | ✅ | ✅ | ✅ |
+| Audio tracks | ✅ | ✅ | ✅ | ✅ |
+| Keyboard shortcuts | ✅ | ❌ | ✅ | ❌ |
+| Touch gestures | ❌ | ✅ | ❌ | ✅ |
+| Picture-in-Picture | ✅ | ✅ | ✅ | ✅ |
+| Fullscreen | ✅ | ✅ | ✅ | ✅ |
+| Volume control | ✅ | ✅ | ✅ | ❌* |
+
+*iOS Safari'de programmatic volume control yok (donanım butonları)
+
+### Polyfills
+
+Kütüphane, eski tarayıcılar için otomatik polyfill içerir:
+
+```typescript
+// src/utils/polyfills.ts
+
+// Fullscreen API polyfill (vendor prefixes)
+- requestFullscreen
+- exitFullscreen
+- fullscreenElement
+- fullscreenchange event
+
+// Picture-in-Picture polyfill
+- requestPictureInPicture
+- exitPictureInPicture
+- pictureInPictureElement
+```
+
+### Known Issues
+
+**Safari:**
+- HLS.js kullanılmaz (native HLS var)
+- FLV.js MSE desteği sınırlı
+
+**iOS Safari:**
+- Volume control programmatic olarak değiştirilemez
+- Autoplay sadece `muted: true` ile çalışır
+- Fullscreen API sınırlı (video element fullscreen olur, container değil)
+
+**Firefox:**
+- Picture-in-Picture API henüz desteklenmiyor (planned)
+
+**Eski Tarayıcılar (IE11, Edge <90):**
+- Desteklenmez
+- MSE/EME yok → HLS/FLV çalışmaz
+- ES6 features gerektirir
+
+---
+
+## 🚨 Hata Yönetimi
+
+### CORS Errors
+
+**Problem:** Video farklı origin'den geliyorsa CORS hatası
+
+**Tespit:**
+```typescript
+import { isCORSError, getCORSErrorMessage } from '@alper/video-player'
+
+const handleError = (error: Error) => {
+  if (isCORSError(error)) {
+    const message = getCORSErrorMessage(error, videoUrl)
+    console.error(message)
+  }
+}
+```
+
+**Çözüm:**
+Video sunucunuzda CORS headers ekleyin:
+
+```
+Access-Control-Allow-Origin: *
+Access-Control-Allow-Methods: GET, HEAD, OPTIONS
+Access-Control-Allow-Headers: Range, Content-Type
+Access-Control-Expose-Headers: Content-Length, Content-Range
+```
+
+**Nginx Örneği:**
+```nginx
+location /videos/ {
+    add_header Access-Control-Allow-Origin *;
+    add_header Access-Control-Allow-Methods 'GET, HEAD, OPTIONS';
+    add_header Access-Control-Allow-Headers 'Range';
+    add_header Access-Control-Expose-Headers 'Content-Length, Content-Range';
+
+    if ($request_method = OPTIONS) {
+        return 204;
+    }
+}
+```
+
+**Apache Örneği:**
+```apache
+<IfModule mod_headers.c>
+    Header set Access-Control-Allow-Origin "*"
+    Header set Access-Control-Allow-Methods "GET, HEAD, OPTIONS"
+    Header set Access-Control-Allow-Headers "Range"
+    Header set Access-Control-Expose-Headers "Content-Length, Content-Range"
+</IfModule>
+```
+
+### HLS Errors
+
+**Manifest Parse Error:**
+```typescript
+// HLS manifest yüklenemedi veya parse edilemedi
+// Çözüm: .m3u8 URL'inin doğru olduğundan emin olun
+```
+
+**Network Error:**
+```typescript
+// HLS segment indirilemiyor
+// Otomatik recovery: 3 kez retry
+```
+
+**Media Error:**
+```typescript
+// Video decode hatası
+// Otomatik recovery: HLS instance restart
+```
+
+**Fatal Error:**
+```typescript
+// Kurtarılamaz hata
+// Error state'e düşer, onError callback çağrılır
+```
+
+### RTMP/FLV Errors
+
+**Network Exception:**
+```typescript
+// FLV stream bağlantı hatası
+// Otomatik retry
+```
+
+**Media Error:**
+```typescript
+// FLV decode hatası
+// Error callback çağrılır
+```
+
+### Error Handling Best Practices
 
 ```tsx
-// Route-based splitting
-import { lazy } from 'react'
+function RobustVideoPlayer() {
+  const [error, setError] = useState<string | null>(null)
+  const [retryCount, setRetryCount] = useState(0)
+  const maxRetries = 3
 
-const VideoPage = lazy(() => import('./pages/VideoPage'))
+  const handleError = (err: Error) => {
+    console.error('Video error:', err)
 
-// Router
-<Route path="/video" element={<VideoPage />} />
+    if (isCORSError(err)) {
+      setError('CORS hatası: Video sunucusu CORS headers eklemeli')
+    } else if (retryCount < maxRetries) {
+      // Retry
+      setRetryCount(retryCount + 1)
+      setTimeout(() => {
+        window.location.reload()
+      }, 2000)
+    } else {
+      setError(`Video yüklenemedi: ${err.message}`)
+    }
+  }
+
+  if (error) {
+    return (
+      <div className="error-container">
+        <h3>Video Hatası</h3>
+        <p>{error}</p>
+        <button onClick={() => window.location.reload()}>
+          Yeniden Dene
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <VideoPlayer
+      src="video.mp4"
+      onError={handleError}
+    />
+  )
+}
 ```
 
 ---
 
-## 💡 En İyi Pratikler
+## 🛠️ Geliştirme
 
-### 1. Video Dosyası Optimizasyonu
+### Kurulum
 
 ```bash
-# FFmpeg ile video optimizasyonu
-ffmpeg -i input.mp4 -c:v libx264 -crf 23 -preset medium \
-  -c:a aac -b:a 128k -movflags +faststart output.mp4
+# Repository'yi klonlayın
+git clone https://gitea.hibna.com.tr/hibna/video-player.git
+cd video-player
+
+# Bağımlılıkları yükleyin
+npm install
+# veya
+pnpm install
 ```
 
-### 2. Poster Resmi Kullanımı
+### Development Server
 
-Her zaman poster resmi ekleyin:
-```tsx
-<VideoPlayer
-  src="/video.mp4"
-  poster="/poster.jpg"  // İlk frame veya özel tasarım
-/>
+```bash
+# Dev server'ı başlat (examples/ klasörü)
+npm run dev
+
+# Tarayıcıda açın: http://localhost:5173
 ```
 
-### 3. Loading State Yönetimi
+### Build
 
-```tsx
-const [videoLoading, setVideoLoading] = useState(true)
+```bash
+# Kütüphane build
+npm run build:lib
 
-<VideoPlayer
-  src="/video.mp4"
-  onLoadedMetadata={() => setVideoLoading(false)}
-/>
+# Development build (examples)
+npm run build
+
+# Çıktı: dist/ klasörü
 ```
 
-### 4. Error Boundaries
+### Testing
 
-```tsx
-import { ErrorBoundary } from 'react-error-boundary'
+```bash
+# Unit testleri çalıştır
+npm run test
 
-<ErrorBoundary fallback={<div>Video hatası</div>}>
-  <VideoPlayer src="/video.mp4" />
-</ErrorBoundary>
+# Test UI
+npm run test:ui
+
+# Coverage raporu
+npm run test:coverage
 ```
 
-### 5. Accessibility
+### Linting
 
-```tsx
-<VideoPlayer
-  src="/video.mp4"
-  subtitles={subtitleTracks}  // Altyazı ekle
-  // ARIA labels otomatik eklenir
-/>
+```bash
+# ESLint kontrolü
+npm run lint
+```
+
+### Type Checking
+
+```bash
+# TypeScript kontrolü
+npx tsc --noEmit
+```
+
+### Package Yayınlama
+
+```bash
+# 1. Version bump
+npm version patch  # 0.1.5 -> 0.1.6
+npm version minor  # 0.1.5 -> 0.2.0
+npm version major  # 0.1.5 -> 1.0.0
+
+# 2. Build
+npm run build:lib
+
+# 3. Gitea'ya push
+git push origin main --tags
+
+# 4. NPM'e yayınla (Gitea registry)
+npm publish
+
+# NOT: .npmrc dosyasında authentication token olmalı
+```
+
+### Project Scripts
+
+```json
+{
+  "scripts": {
+    "dev": "vite",                          // Dev server
+    "build": "tsc && vite build",          // Build examples
+    "build:lib": "vite build --config vite.config.lib.ts",  // Build library
+    "preview": "vite preview",              // Preview build
+    "lint": "eslint . --max-warnings 0",   // ESLint
+    "test": "vitest",                       // Run tests
+    "test:ui": "vitest --ui",              // Test UI
+    "test:coverage": "vitest --coverage"   // Coverage
+  }
+}
 ```
 
 ---
 
-## 🎓 Örnek Projeler
+## 🤝 Katkıda Bulunma
 
-### Next.js ile Kullanım
+Katkılarınızı bekliyoruz! Lütfen şu adımları takip edin:
 
-```tsx
-// pages/video.tsx
-import dynamic from 'next/dynamic'
-import '@alper/video-player/styles.css'
+### 1. Fork & Clone
 
-const VideoPlayer = dynamic(
-  () => import('@alper/video-player').then(m => m.VideoPlayer),
-  { ssr: false }
-)
-
-export default function VideoPage() {
-  return (
-    <div>
-      <h1>Video Sayfası</h1>
-      <VideoPlayer src="/videos/demo.mp4" />
-    </div>
-  )
-}
+```bash
+# Repository'yi fork edin (Gitea UI'dan)
+# Fork'unuzu klonlayın
+git clone https://gitea.hibna.com.tr/YOUR_USERNAME/video-player.git
+cd video-player
 ```
 
-### Gatsby ile Kullanım
+### 2. Branch Oluşturun
 
-```tsx
-// src/pages/video.tsx
-import React from 'react'
-import { VideoPlayer } from '@alper/video-player'
-import '@alper/video-player/styles.css'
-
-const VideoPage = () => {
-  return (
-    <div>
-      <h1>Video Sayfası</h1>
-      <VideoPlayer src="/videos/demo.mp4" />
-    </div>
-  )
-}
-
-export default VideoPage
+```bash
+git checkout -b feature/amazing-feature
 ```
 
-### Vite ile Kullanım
+### 3. Değişiklik Yapın
 
-```tsx
-// src/App.tsx
-import { VideoPlayer } from '@alper/video-player'
-import '@alper/video-player/styles.css'
-
-function App() {
-  return (
-    <VideoPlayer src="/video.mp4" />
-  )
-}
-
-export default App
+```bash
+# Kodunuzu yazın
+# Testlerinizi ekleyin
+# Linting'i kontrol edin
+npm run lint
+npm run test
 ```
 
+### 4. Commit & Push
+
+```bash
+git add .
+git commit -m "feat: Add amazing feature"
+git push origin feature/amazing-feature
+```
+
+### 5. Pull Request
+
+Gitea'da Pull Request oluşturun.
+
+### Commit Conventions
+
+```
+feat: Yeni özellik
+fix: Bug fix
+docs: Dökümantasyon
+style: Kod formatı
+refactor: Refactoring
+test: Test ekleme
+chore: Build/config değişikliği
+```
+
+### Code Style
+
+- TypeScript strict mode
+- ESLint rules
+- Prettier formatting (opsiyonel)
+- Component/function comment'leri
+
 ---
 
-## 📝 SSS (Sıkça Sorulan Sorular)
+## 📝 Lisans
 
-### Video oynatılmıyor, ne yapmalıyım?
+MIT License
 
-1. Console'da hata kontrolü yapın
-2. CORS ayarlarını kontrol edin
-3. Video dosya formatını kontrol edin (MP4, WebM desteklenir)
-4. URL'in doğru olduğundan emin olun
+Copyright (c) 2024 Alper
 
-### HLS streaming çalışmıyor?
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
 
-- hls.js'in yüklendiğinden emin olun: `npm install hls.js`
-- URL'in `.m3u8` uzantılı olduğunu kontrol edin
-- Tarayıcı console'unda hata kontrolü yapın
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
 
-### Otomatik oynatma çalışmıyor?
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
 
-Modern tarayıcılar, `muted` olmadan otomatik oynatmaya izin vermez:
-```tsx
-<VideoPlayer src="video.mp4" autoplay muted />
-```
+---
 
-### iOS'ta tam ekran native player açılıyor?
+## 📞 İletişim
 
-Bu iOS Safari'nin varsayılan davranışıdır ve değiştirilemez. İOS native player'ı kullanır.
+- **Repository:** https://gitea.hibna.com.tr/hibna/video-player
+- **NPM Registry:** https://gitea.hibna.com.tr/api/packages/hibna/npm/
+- **Issues:** https://gitea.hibna.com.tr/hibna/video-player/issues
+- **Author:** Alper
 
-### Altyazılar görünmüyor?
+---
 
-- Altyazı dosyasının CORS header'larına sahip olduğundan emin olun
-- Format kontrolü yapın (VTT veya SRT)
-- URL'in doğru olduğunu kontrol edin
+## 🎉 Teşekkürler
 
-### Bundle boyutunu nasıl azaltırım?
+Bu proje, aşağıdaki açık kaynak kütüphanelerden ilham almıştır:
 
-- hls.js'i optional olarak bırakın (sadece HLS kullanıyorsanız)
-- Tree-shaking için ES Module import kullanın
-- Lazy loading kullanın
+- [hls.js](https://github.com/video-dev/hls.js) - HLS streaming
+- [flv.js](https://github.com/bilibili/flv.js) - FLV streaming
+- [React](https://react.dev/) - UI framework
+- [Vite](https://vitejs.dev/) - Build tool
+- [TypeScript](https://www.typescriptlang.org/) - Type safety
 
-### Kendi ikonlarımı kullanabilir miyim?
+---
 
-Evet, CSS ile override edebilirsiniz veya kütüphaneyi fork edip özelleştirebilirsiniz.
\ No newline at end of file
+**Built with ❤️ using React, TypeScript, and Vite**
+
+*Son güncelleme: 2024*
diff --git a/__pycache__/check_srt.cpython-311.pyc b/__pycache__/check_srt.cpython-311.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..cc4eab1daca5910b79655bf44e686808c0073484
GIT binary patch
literal 6017
zcmbsrTWk|ocE-=KJ$@wENyvjt0&U`uID|(V!ZYR3v?WvpS~WC~PCSz^*dCjiF$rdj
z_}EGgV%31CaCbp<D;CmH?S{X8th6hYmG*CEqS4lC2`SQw4}Mmu+LaJrd+v;r*m*!;
zuaD2%$9bQ7?!EWiZYKuq=|8O;=f$vpqrrS5ik)A+gU(Hi!5BP>ox~W^Z?Ka%Yhuh1
z6QU3fnJ^Y-EO&7XyAOY(4Z_+<^GOS97QL)RbOVi*v6j=|An`b+uh;<FSabRM?=i-%
z&o7Y;^Th2HWg&S%#}j12(eQ#TFmk}(4F6v$!QY$MD3-?IZ<0!AWUz)YeQ&-CboUXh
z-gaPVvuw_l(9N%4*j?z}Ul^t>jQ+a|p5NCagO+fNcWuPFFwrt*8aEGMV>pftz%2M~
zO+!S|HrXm!7ldH)5?>?w(xh29yB0d(glv(m>lei37W`P4f=;>JjIEf*H)JbgPq{HH
zZC#VD4X>_i8gxC^Yds=@Y0||1N46EMvdOlzUAGZ@NE0uwJ!dJ6!hF9x8sZKa&z0n3
zo(h9KClj#q951gIxSY%PD}O|SSkJeYms(ycX@~5P?GZiSLZfVYt`9ER4mOdp1F-wH
zy<8HGt$809S*lw#VjkHB8oalc)HRMlUQLUcWPE9-1gFn@J3D{!V6yWS;!;+Blek#<
z@-oscrb2d|$AmmnsehZ8b@0W7hE;tvc86bft&;73lzE8GBfT*J*;RgGyiiBgsyc43
zqNDnyb=0h?BeIH)^)IcXc2ylaUl8TGRXOWlz*)Z<=i;7+dx3nx>7-{)h`;>4g0t4B
z&<|vC<q9pA`O1}PSomruv~J-vSSZ%7dX5;C-JqX{8<wAKYl+{adHSprFscAyrV*VM
zw@piZE~BBCrj=-9T==YvuDR@X!OLYrg>GDaCYA9wm2<$E2rnFF(`Tl|yY(P;%Aa<Z
zalIzHSF-ME;Ca?Cn<DzXBy22`_4@O9Qt*xeKU$Xi!F$W(v@Y|+B>bj~B3PzrN&H_a
zRwjs5+p<`B%Cx>Fd)5%ECDt%)Ylzh{o?@&vFOQXs%cc<%ycye*TVM+wKX!s*;^GBb
zeE5KW_<)MUc}a*zDVAXc>O4!Gp(Q#>3$QYrj3$Lp0T)u%q%_je9mER+%ZK9($B!Nr
z(Ce>&JwcDgq#ennrH2m$D!Cc@JydU0x<IEu2%n760@6hdvymvva~I-5yDpli`5vm}
z8Qzja1+pSb5<T3hcr->wA3kWOQiQ?CB$McFS<sQJ(gmEPV>C}ObZk`D$3{dhlG=HC
zkh!=u-BW_wp}#FXD7JNU>;+u1Vo(|Dn^I<2e};#i;qA%&x`KW#%84|%z*6)DaQ5MY
zF!*(z6GnghbChar4=$R@$0HI=wT6Ne!#@0qi-M=A3eeP5W=XPDmwTM1rA~&9a1pw*
zD1R&DfoG%KyhOxbjSTB*-<tjed^#o1k2WQ#rPgg*f!mJgx3{PDP0&M?__CCmY8|0d
zQJNa2MTlr52)dK6>nh%6f4s*EBA234<*^=#3o(>`MB1T~E=k5>@~Kt`Yp`?+=*gs7
z#o`9427b`l&q^FmaY!Kt5u}FWfBPy~3u`Chi6|YT==mKcqFlfR>!F_E&eZNb|3^zX
zoqfG0dXMxTqgqpTie^|T*z;s7C{0-?s)K@ciVB57s7_K&y;NYoouN}T&i4dP;v&Wr
zDjXgH#Bfb1m-EAc-ed3RBA@t?Bo~#uKntAC7<3gZ@dV2k90E%-QI2QDf*Go$U=<~S
zOBC#!$Z(^aRIt$rAY%$<j+Y81fh|}e-r+L^o5<1ve60xqR)XGwV}y&cLkU`fHC7Pf
zf><ENXn}{C6$|)C!D=YMxq?Sb4ojQ_)Zus%q<Y!$1RIuEW(aC_m=y{HB1MCOn+{7!
zIy%2lA#pKQl;~IjDUw)$FL)NG5Ldw|vE$N^q06e<QLxXOfnLE>d3&}q+%x#02zzU=
zH=1CD!GrN|GRE?fIQTXv^(BV~&vOhL?|{r-fYtCBHXIoe1u2xcQ1C5`hKy|}1VI71
z;KeE%hF!+yY?#M)`EcG_ak=lY!=2%>>vCg?qf>QsYL3o147YBW?#lZrZo00!uDNfx
zGuAmX%;^g{`Wcb@iqPWRO1-B~pRP0w`W?>8z4<`Z<)gDs*Kfm<uT7l2diF|aA~fsq
zez9?qz1DW4?FygabAjBsJ2m$<e6vAq>e8CJrjN}uy{R<4nJ3+o6%&Uuy>n*F>st#4
z=p@}=m?sZibKY=X*_YY(FS25msLD2}L|w*{uWikEfy5t}Ja=tJhRA#UlOJ3i|NPRG
zORBd~^EUqEZJF`5sNSIF4bEX!M;gzQm7n)t=~rr_xjsM$22LwOpK1g2PXnVf1EcBy
zrwwq$rP`=U#xydf=<v9{F=x%ucZhqQZ#*isMWeQ;^<7$hSEfJjt<QO9yq$`-Gw-Xp
z>Amh%sEbprfB^p9XnYmsT(Lu4RDH7MlNFylOE@wgOxQB`tcxslbivRgIbNwfVt`8a
zYh=Gd_Cpv-{jUF5A=W?kR$LudYJyWcrYpYh{?p#?_NtqAX`6Sc-rbsa_s^K$A>gwO
z&AF~yAAfcFcc;~c4y~aha}?zG0$GpZeH~zST~#)utZN0BI{t%4={O9K_t)O+zurHG
zVH^8QQ+>vF0gvH_ObY`bF#11ZSl}JguR4Yq=o|QPp!&vu(ztE<v>G_51rE+(L`57g
zYEYWvQ+<FCoQ@Vd&2iPA(EJHSha&&ZANHz&ceTK~kkwNDQN%xr;3KBkX&zPmXEgsA
zMTbX7e>OD*>^)kbXAU!$vX3G5F$5!0vC}-J`o}f@xT3?X5elU_hA3kQ2G15d%`w%_
zYkpqQVb)i5(|z5oY)DKIfDjDDik%G!)pt(wol|`07Sa!CsH(|0^J}f7s-MV)8L}bE
z=6Y|PQOOpKY*EOT#R{{owZaI@R}1CtV4ybqpTB?QeWiYQ$^!`CuQkROuu6tCGOUo{
zxr;dFB1^0Pzn5^#>QtO><}LvOP%Yh>rCYIdKe9M79hvj+?@%o@nx#gu)Xdu5kaX+j
zM}%APY`J|PXZ!NKTkk>F0F~&{h%SZbg7wVEg!`&H<IV@_vInxqvIlN_f-G&;QRdJi
zvSKon4NQh6Ln_&%kxhyYk6fP2`H5XucV#PQTy=`84(OE1-G4CW4u9>s<C+?V(uJ`B
zD!E4^_bB9^r;m|6L6vCJh&F|2o3(rAFq^d(*X`VP`*^PA%Tu>bDV}WxsKj=S*sc)U
zOYN*~%$akQIrEJ)GI5iRGH>hpo3qtQWix<EZq&$)iVn!s@rgZG_hh%uxEd5!gHE~+
zOzr#HeaAg*QmL&<<vs&ca=%9ISIGUdu8PTS@Jq4Oi6q<)Hv`?~A1u4=f5CU#3&hY+
zjOO^Ep_C_)9FB6~PLUNuaL1%JITzo|90k`N4L1|Kp+|)zW!yLt-ITIB-%qhp4+ZZA
z^n`}js?E6QgLVNuaP?aWX@QpkJ2WJqr;JdCPz^#pK;L4&0LBFLDtt!lj>VZ|l-(<Y
zV2GaC;vWIQ)r8}D%yC)&%~?Lh@%lNe1RpeG7BZ8XF|Sw5>+{tu3P5YOTD?=N-l<yr
zmk($9AP!K!)`NJq)%fON%UBi94wZOABi>NvVb+*_E4vPUAAMPOt4{H}1u%7d>iBfc
dx2L{`tfDc1N*vIL1Ij$ixiL#E=oipq@PFF&n5h5&

literal 0
HcmV?d00001

diff --git a/check_srt.py b/check_srt.py
new file mode 100644
index 0000000..382663b
--- /dev/null
+++ b/check_srt.py
@@ -0,0 +1,109 @@
+import re
+
+def check_srt_format(file_path):
+    """SRT dosyasını kontrol eder ve hataları bulur."""
+
+    errors = []
+    warnings = []
+
+    with open(file_path, 'r', encoding='utf-8') as f:
+        lines = f.readlines()
+
+    i = 0
+    subtitle_count = 0
+
+    while i < len(lines):
+        # Boş satırları atla
+        while i < len(lines) and lines[i].strip() == '':
+            i += 1
+
+        if i >= len(lines):
+            break
+
+        subtitle_count += 1
+        expected_number = subtitle_count
+
+        # Satır 1: Altyazı numarası
+        line_num = i + 1
+        if not lines[i].strip().isdigit():
+            errors.append(f"Satır {line_num}: Altyazı numarası bekleniyor, bulunan: '{lines[i].strip()}'")
+        else:
+            actual_number = int(lines[i].strip())
+            if actual_number != expected_number:
+                warnings.append(f"Satır {line_num}: Altyazı numarası {expected_number} olmalı, {actual_number} bulundu")
+
+        i += 1
+
+        if i >= len(lines):
+            errors.append(f"Altyazı {subtitle_count}: Zaman damgası eksik")
+            break
+
+        # Satır 2: Zaman damgası
+        line_num = i + 1
+        timestamp_pattern = r'^\d{2}:\d{2}:\d{2},\d{3}\s*-->\s*\d{2}:\d{2}:\d{2},\d{3}$'
+
+        if not re.match(timestamp_pattern, lines[i].strip()):
+            # Hatalı formatları tespit et
+            timestamp_line = lines[i].strip()
+
+            # Yaygın hatalar
+            if '-->' in timestamp_line:
+                # Virgül yerine nokta kullanımı
+                if '.' in timestamp_line and ',' not in timestamp_line:
+                    errors.append(f"Satır {line_num}: Milisaniye ayırıcı virgül (,) olmalı, nokta (.) değil: '{timestamp_line}'")
+                # Eksik sıfırlar
+                elif re.search(r'\d{1}:\d{2}:\d{2}', timestamp_line):
+                    errors.append(f"Satır {line_num}: Saat/dakika/saniye 2 haneli olmalı: '{timestamp_line}'")
+                # Eksik/fazla milisaniye basamağı
+                elif re.search(r',\d{1,2}[^\d]|,\d{1,2}$', timestamp_line):
+                    errors.append(f"Satır {line_num}: Milisaniye 3 haneli olmalı: '{timestamp_line}'")
+                elif re.search(r',\d{4,}', timestamp_line):
+                    errors.append(f"Satır {line_num}: Milisaniye 3 haneli olmalı (fazla basamak): '{timestamp_line}'")
+                else:
+                    errors.append(f"Satır {line_num}: Geçersiz zaman damgası formatı: '{timestamp_line}'")
+            else:
+                errors.append(f"Satır {line_num}: Zaman damgası bekleniyor (-->), bulunan: '{timestamp_line}'")
+
+        i += 1
+
+        # Satır 3+: Altyazı metni
+        text_lines = []
+        while i < len(lines) and lines[i].strip() != '':
+            text_lines.append(lines[i])
+            i += 1
+
+        if not text_lines:
+            warnings.append(f"Altyazı {subtitle_count} (satır {line_num}): Metin içeriği boş")
+
+    print(f"Toplam altyazı sayısı: {subtitle_count}")
+    print(f"\n{'='*60}")
+
+    if errors:
+        print(f"\nHATALAR ({len(errors)} adet):")
+        print("="*60)
+        for error in errors[:50]:  # İlk 50 hatayı göster
+            print(f"  - {error}")
+        if len(errors) > 50:
+            print(f"\n  ... ve {len(errors) - 50} hata daha")
+    else:
+        print("\nKritik hata bulunamadi!")
+
+    if warnings:
+        print(f"\nUYARILAR ({len(warnings)} adet):")
+        print("="*60)
+        for warning in warnings[:20]:  # İlk 20 uyarıyı göster
+            print(f"  - {warning}")
+        if len(warnings) > 20:
+            print(f"\n  ... ve {len(warnings) - 20} uyari daha")
+
+    return errors, warnings
+
+if __name__ == "__main__":
+    import sys
+    file_path = sys.argv[1] if len(sys.argv) > 1 else "public/ses.srt"
+    errors, warnings = check_srt_format(file_path)
+
+    if not errors and not warnings:
+        print("\nSRT dosyasi tamamen dogru formatta!")
+    else:
+        print(f"\nOzet: {len(errors)} hata, {len(warnings)} uyari")
diff --git a/comprehensive_srt_check.py b/comprehensive_srt_check.py
new file mode 100644
index 0000000..7285e45
--- /dev/null
+++ b/comprehensive_srt_check.py
@@ -0,0 +1,281 @@
+import re
+from datetime import datetime, timedelta
+
+def comprehensive_srt_check(file_path):
+    """Kapsamlı SRT format kontrolü - tüm olası hataları yakalar."""
+
+    errors = []
+    warnings = []
+
+    with open(file_path, 'r', encoding='utf-8') as f:
+        lines = f.readlines()
+
+    i = 0
+    subtitle_count = 0
+    prev_end_time = None
+
+    while i < len(lines):
+        # Boş satırları atla
+        while i < len(lines) and lines[i].strip() == '':
+            i += 1
+
+        if i >= len(lines):
+            break
+
+        subtitle_count += 1
+        start_line = i + 1
+
+        # ===== 1. ALTYAZI NUMARASI KONTROLÜ =====
+        line_num = i + 1
+        line_content = lines[i].strip()
+
+        if not line_content:
+            errors.append(f"Satir {line_num}: Bos satir, altyazi numarasi bekleniyor")
+            i += 1
+            continue
+
+        if not line_content.isdigit():
+            errors.append(f"Satir {line_num}: Altyazi numarasi olmali, bulunan: '{line_content[:50]}'")
+            # Sonraki geçerli numarayı bulmaya çalış
+            while i < len(lines) and not lines[i].strip().isdigit():
+                i += 1
+            if i >= len(lines):
+                break
+        else:
+            actual_number = int(line_content)
+            if actual_number != subtitle_count:
+                warnings.append(f"Satir {line_num}: Numara sırası bozuk - beklenen: {subtitle_count}, bulunan: {actual_number}")
+
+        i += 1
+
+        # ===== 2. ZAMAN DAMGASI KONTROLÜ =====
+        if i >= len(lines):
+            errors.append(f"Altyazi {subtitle_count}: Zaman damgasi eksik (dosya sonu)")
+            break
+
+        line_num = i + 1
+        timestamp_line = lines[i].strip()
+
+        if not timestamp_line:
+            errors.append(f"Satir {line_num}: Bos satir, zaman damgasi bekleniyor")
+            i += 1
+            continue
+
+        # Zaman damgası formatını detaylı kontrol et
+        if '-->' not in timestamp_line:
+            errors.append(f"Satir {line_num}: '-->' ayirici bulunamadi: '{timestamp_line[:50]}'")
+            i += 1
+            continue
+
+        parts = timestamp_line.split('-->')
+        if len(parts) != 2:
+            errors.append(f"Satir {line_num}: Gecersiz zaman damgasi formati: '{timestamp_line[:50]}'")
+            i += 1
+            continue
+
+        start_time_str = parts[0].strip()
+        end_time_str = parts[1].strip()
+
+        # Başlangıç zamanı kontrolü
+        start_errors = validate_timestamp(start_time_str, "baslangic")
+        if start_errors:
+            for err in start_errors:
+                errors.append(f"Satir {line_num} {err}: '{start_time_str}'")
+
+        # Bitiş zamanı kontrolü
+        end_errors = validate_timestamp(end_time_str, "bitis")
+        if end_errors:
+            for err in end_errors:
+                errors.append(f"Satir {line_num} {err}: '{end_time_str}'")
+
+        # Zamanları parse et ve mantıksal kontroller yap
+        if not start_errors and not end_errors:
+            start_ms = parse_timestamp_to_ms(start_time_str)
+            end_ms = parse_timestamp_to_ms(end_time_str)
+
+            if start_ms is None or end_ms is None:
+                errors.append(f"Satir {line_num}: Zaman parse edilemedi: '{timestamp_line}'")
+            else:
+                # Başlangıç >= Bitiş kontrolü
+                if start_ms >= end_ms:
+                    errors.append(f"Satir {line_num}: Baslangic zamani bitis zamanindan buyuk/esit: {start_time_str} >= {end_time_str}")
+
+                # Negatif zaman kontrolü
+                if start_ms < 0 or end_ms < 0:
+                    errors.append(f"Satir {line_num}: Negatif zaman degeri: '{timestamp_line}'")
+
+                # Çok uzun altyazı kontrolü (>10 saniye)
+                duration_ms = end_ms - start_ms
+                if duration_ms > 10000:
+                    warnings.append(f"Satir {line_num}: Cok uzun altyazi suresi ({duration_ms/1000:.1f} saniye): {start_time_str} --> {end_time_str}")
+
+                # Çok kısa altyazı kontrolü (<0.1 saniye)
+                if duration_ms < 100:
+                    warnings.append(f"Satir {line_num}: Cok kisa altyazi suresi ({duration_ms}ms): {start_time_str} --> {end_time_str}")
+
+                # Önceki altyazı ile çakışma kontrolü
+                if prev_end_time is not None and start_ms < prev_end_time:
+                    time_overlap = prev_end_time - start_ms
+                    warnings.append(f"Satir {line_num}: Onceki altyazi ile cakisma ({time_overlap}ms): {start_time_str}")
+
+                prev_end_time = end_ms
+
+        i += 1
+
+        # ===== 3. METİN İÇERİĞİ KONTROLÜ =====
+        text_lines = []
+        text_start_line = i + 1
+
+        while i < len(lines) and lines[i].strip() != '':
+            # Bir sonraki satır numara mı kontrol et (yeni altyazı başlangıcı)
+            if (i + 1 < len(lines) and
+                lines[i].strip().isdigit() and
+                '-->' in lines[i + 1]):
+                break
+
+            text_lines.append(lines[i].rstrip())
+            i += 1
+
+        if not text_lines:
+            warnings.append(f"Altyazi {subtitle_count} (satir {start_line}): Metin icerigi bos")
+        else:
+            # Metin kontrolü
+            full_text = ' '.join([t.strip() for t in text_lines])
+
+            # Çok uzun metin kontrolü
+            if len(full_text) > 200:
+                warnings.append(f"Altyazi {subtitle_count}: Cok uzun metin ({len(full_text)} karakter)")
+
+            # HTML tag kontrolü
+            if re.search(r'<[^>]+>', full_text):
+                warnings.append(f"Altyazi {subtitle_count}: HTML/XML tag iceriyor (bazi oynaticilar desteklemeyebilir)")
+
+            # Garip karakterler
+            if re.search(r'[\x00-\x08\x0B-\x0C\x0E-\x1F]', full_text):
+                warnings.append(f"Altyazi {subtitle_count}: Kontrol karakterleri iceriyor")
+
+    return errors, warnings, subtitle_count
+
+
+def validate_timestamp(time_str, time_type):
+    """Tek bir zaman damgasını (HH:MM:SS,mmm) doğrular."""
+    errors = []
+
+    # Format: HH:MM:SS,mmm
+    pattern = r'^(\d{2}):(\d{2}):(\d{2}),(\d{3})$'
+    match = re.match(pattern, time_str)
+
+    if not match:
+        # Hangi kısım hatalı bul
+        if ',' not in time_str and '.' not in time_str:
+            errors.append(f"({time_type}): Milisaniye ayirici eksik (virgul)")
+        elif '.' in time_str:
+            errors.append(f"({time_type}): Milisaniye ayirici nokta olmamali, virgul olmali")
+        elif time_str.count(':') != 2:
+            errors.append(f"({time_type}): ':' ayirici sayisi yanlis (2 olmali)")
+        else:
+            # Rakam sayısı kontrolü
+            parts = time_str.replace(',', ':').replace('.', ':').split(':')
+            if len(parts) == 4:
+                hours, mins, secs, ms = parts
+                if len(hours) != 2:
+                    errors.append(f"({time_type}): Saat 2 haneli olmali")
+                if len(mins) != 2:
+                    errors.append(f"({time_type}): Dakika 2 haneli olmali")
+                if len(secs) != 2:
+                    errors.append(f"({time_type}): Saniye 2 haneli olmali")
+                if len(ms) != 3:
+                    errors.append(f"({time_type}): Milisaniye 3 haneli olmali")
+            else:
+                errors.append(f"({time_type}): Format hatasi (HH:MM:SS,mmm olmali)")
+        return errors
+
+    # Değer aralığı kontrolü
+    hours, mins, secs, ms = match.groups()
+    hours, mins, secs, ms = int(hours), int(mins), int(secs), int(ms)
+
+    if hours > 23:
+        warnings = []  # Videolar 24 saatten uzun olabilir, warning olarak işaretle
+    if mins > 59:
+        errors.append(f"({time_type}): Dakika 59'dan buyuk olamaz ({mins})")
+    if secs > 59:
+        errors.append(f"({time_type}): Saniye 59'dan buyuk olamaz ({secs})")
+    if ms > 999:
+        errors.append(f"({time_type}): Milisaniye 999'dan buyuk olamaz ({ms})")
+
+    return errors
+
+
+def parse_timestamp_to_ms(time_str):
+    """Zaman damgasını milisaniyeye çevirir."""
+    try:
+        # Format: HH:MM:SS,mmm
+        pattern = r'^(\d{2}):(\d{2}):(\d{2}),(\d{3})$'
+        match = re.match(pattern, time_str)
+
+        if not match:
+            return None
+
+        hours, mins, secs, ms = match.groups()
+        total_ms = (int(hours) * 3600 + int(mins) * 60 + int(secs)) * 1000 + int(ms)
+        return total_ms
+    except:
+        return None
+
+
+def print_results(errors, warnings, subtitle_count, file_path):
+    """Sonuçları yazdır."""
+    print(f"Dosya: {file_path}")
+    print(f"Toplam altyazi sayisi: {subtitle_count}")
+    print(f"\n{'='*70}")
+
+    if errors:
+        print(f"\nHATALAR ({len(errors)} adet):")
+        print("="*70)
+        for i, error in enumerate(errors[:100], 1):
+            print(f"  {i}. {error}")
+        if len(errors) > 100:
+            print(f"\n  ... ve {len(errors) - 100} hata daha")
+    else:
+        print("\nKritik hata bulunamadi!")
+
+    if warnings:
+        print(f"\nUYARILAR ({len(warnings)} adet):")
+        print("="*70)
+        for i, warning in enumerate(warnings[:50], 1):
+            print(f"  {i}. {warning}")
+        if len(warnings) > 50:
+            print(f"\n  ... ve {len(warnings) - 50} uyari daha")
+    else:
+        print("\nUyari bulunamadi!")
+
+    print(f"\n{'='*70}")
+
+    if not errors and not warnings:
+        print("\nSonuc: SRT dosyasi MUKEMMEL durumda!")
+    elif not errors:
+        print(f"\nSonuc: Format dogru ama {len(warnings)} uyari var")
+    else:
+        print(f"\nSonuc: {len(errors)} HATA, {len(warnings)} uyari")
+
+    return errors, warnings
+
+
+if __name__ == "__main__":
+    import sys
+
+    file_path = sys.argv[1] if len(sys.argv) > 1 else "public/ses.srt"
+
+    print("\nKAPSAMLI SRT FORMAT KONTROLU")
+    print("="*70)
+    print("\nKontrol edilen hususlar:")
+    print("  - Altyazi numara sirasi")
+    print("  - Zaman damgasi formati (HH:MM:SS,mmm)")
+    print("  - Baslangic/bitis zaman mantigi")
+    print("  - Altyazi cakismalari")
+    print("  - Altyazi sureleri")
+    print("  - Metin icerigi")
+    print("="*70)
+
+    errors, warnings, subtitle_count = comprehensive_srt_check(file_path)
+    print_results(errors, warnings, subtitle_count, file_path)
diff --git a/examples/App.tsx b/examples/App.tsx
index 969949c..c73f389 100644
--- a/examples/App.tsx
+++ b/examples/App.tsx
@@ -8,12 +8,12 @@ function App() {
   const [useDemo, setUseDemo] = useState(true)
 
   // Demo video URLs (you can replace with your own)
-  const demoVideoUrl = '/s6ebilmemkac.mp4'
-  const demoPoster = '/s6ebilmemkac.webp'
+  const demoVideoUrl = '/player/Stormy Weather_c7e908aa/master.m3u8'
+  const demoPoster = '/player/foto.jpg'
 
   const demoSubtitles: SubtitleTrack[] = [
     {
-      src: '/ses.srt',
+      src: '/player/ses.srt',
       lang: 'tr',
       label: 'Türkçe',
       default: true,
diff --git a/fix_srt.py b/fix_srt.py
new file mode 100644
index 0000000..a98625b
--- /dev/null
+++ b/fix_srt.py
@@ -0,0 +1,187 @@
+import re
+
+def fix_srt_file(input_path, output_path):
+    """SRT dosyasındaki format hatalarını düzeltir."""
+
+    with open(input_path, 'r', encoding='utf-8') as f:
+        content = f.read()
+
+    lines = content.split('\n')
+    fixed_lines = []
+    i = 0
+    subtitle_number = 1
+    errors_fixed = []
+
+    while i < len(lines):
+        # Boş satırları atla
+        while i < len(lines) and lines[i].strip() == '':
+            i += 1
+
+        if i >= len(lines):
+            break
+
+        # Altyazı numarasını ekle/düzelt
+        fixed_lines.append(str(subtitle_number))
+
+        # Eğer mevcut satır numara değilse, bu satırı kaybetme
+        if not lines[i].strip().isdigit():
+            # Bu satır muhtemelen yanlış yerleştirilmiş metin, geri al
+            pass
+        else:
+            i += 1
+
+        if i >= len(lines):
+            errors_fixed.append(f"Altyazı {subtitle_number}: Zaman damgası eksik (dosya sonu)")
+            break
+
+        # Zaman damgasını bul ve düzelt
+        timestamp_line = lines[i].strip()
+
+        if '-->' in timestamp_line:
+            # Zaman damgasını düzelt
+            fixed_timestamp = fix_timestamp(timestamp_line, subtitle_number)
+            if fixed_timestamp != timestamp_line:
+                errors_fixed.append(f"Altyazı {subtitle_number}: Zaman damgası düzeltildi")
+                errors_fixed.append(f"  Eski: {timestamp_line}")
+                errors_fixed.append(f"  Yeni: {fixed_timestamp}")
+            fixed_lines.append(fixed_timestamp)
+            i += 1
+        else:
+            # Zaman damgası bulunamadı, bu bir format hatası
+            # Bu durumda bu satırı metin olarak kabul et
+            errors_fixed.append(f"Altyazı {subtitle_number}: Zaman damgası bulunamadı, atlanıyor")
+            # Sonraki geçerli zaman damgasını bul
+            found_timestamp = False
+            while i < len(lines) and not found_timestamp:
+                if '-->' in lines[i]:
+                    fixed_timestamp = fix_timestamp(lines[i].strip(), subtitle_number)
+                    fixed_lines.append(fixed_timestamp)
+                    i += 1
+                    found_timestamp = True
+                else:
+                    i += 1
+
+            if not found_timestamp:
+                errors_fixed.append(f"Altyazı {subtitle_number}: Hiç zaman damgası bulunamadı, atlanıyor")
+                break
+
+        # Metin satırlarını topla
+        text_lines = []
+        while i < len(lines) and lines[i].strip() != '' and '-->' not in lines[i]:
+            # Bir sonraki satır numara mı kontrol et
+            if i + 1 < len(lines) and lines[i + 1].strip() != '' and '-->' in lines[i + 1]:
+                # Bu muhtemelen metin
+                text_lines.append(lines[i])
+                i += 1
+            elif lines[i].strip().isdigit() and i + 1 < len(lines) and '-->' in lines[i + 1]:
+                # Bu bir sonraki altyazının numarası, dur
+                break
+            else:
+                text_lines.append(lines[i])
+                i += 1
+
+        # Metni ekle
+        for text_line in text_lines:
+            fixed_lines.append(text_line.rstrip())
+
+        # Boş satır ekle
+        fixed_lines.append('')
+
+        subtitle_number += 1
+
+    # Dosyayı kaydet
+    with open(output_path, 'w', encoding='utf-8') as f:
+        f.write('\n'.join(fixed_lines))
+
+    return errors_fixed, subtitle_number - 1
+
+
+def fix_timestamp(timestamp, subtitle_num):
+    """Zaman damgası formatını düzeltir."""
+
+    # Boşlukları temizle
+    parts = timestamp.split('-->')
+    if len(parts) != 2:
+        return timestamp
+
+    start = parts[0].strip()
+    end = parts[1].strip()
+
+    # Her iki tarafı da düzelt
+    start_fixed = fix_time_part(start)
+    end_fixed = fix_time_part(end)
+
+    return f"{start_fixed} --> {end_fixed}"
+
+
+def fix_time_part(time_str):
+    """Tek bir zaman bölümünü düzeltir (HH:MM:SS,mmm)."""
+
+    # Virgül ve noktayı ayır
+    if ',' in time_str:
+        main_part, ms_part = time_str.rsplit(',', 1)
+    elif '.' in time_str:
+        main_part, ms_part = time_str.rsplit('.', 1)
+        # Noktayı virgüle çevir
+    else:
+        # Milisaniye yok, sonuna ekle
+        main_part = time_str
+        ms_part = '000'
+
+    # HH:MM:SS kısmını düzelt
+    time_parts = main_part.split(':')
+
+    # Eksik bölümleri tamamla
+    while len(time_parts) < 3:
+        time_parts.insert(0, '00')
+
+    # Her bölümü 2 haneli yap
+    fixed_parts = []
+    for part in time_parts:
+        # Sadece sayıları al
+        digits = ''.join(filter(str.isdigit, part))
+        if not digits:
+            digits = '0'
+        # 2 haneli yap
+        fixed_parts.append(digits.zfill(2))
+
+    # Milisaniyeyi 3 haneli yap
+    ms_digits = ''.join(filter(str.isdigit, ms_part))
+    if not ms_digits:
+        ms_digits = '000'
+    elif len(ms_digits) > 3:
+        ms_digits = ms_digits[:3]
+    else:
+        ms_digits = ms_digits.ljust(3, '0')
+
+    return f"{':'.join(fixed_parts)},{ms_digits}"
+
+
+if __name__ == "__main__":
+    print("SRT dosyası düzeltiliyor...")
+    print("="*60)
+
+    errors_fixed, total_subtitles = fix_srt_file("public/ses.srt", "public/ses_fixed.srt")
+
+    print(f"\nToplam {total_subtitles} altyazı işlendi")
+
+    if errors_fixed:
+        print(f"\nDüzeltilen hatalar ({len([e for e in errors_fixed if not e.startswith('  ')])} adet):")
+        print("="*60)
+        for error in errors_fixed[:30]:
+            print(f"  {error}")
+        if len(errors_fixed) > 30:
+            print(f"\n  ... ve daha fazlası")
+
+    print(f"\nDüzeltilmiş dosya kaydedildi: public/ses_fixed.srt")
+    print("\nŞimdi kontrol ediliyor...")
+    print("="*60)
+
+    # Kontrol et
+    import check_srt
+    errors, warnings = check_srt.check_srt_format("public/ses_fixed.srt")
+
+    if not errors:
+        print("\n✓ Tüm hatalar düzeltildi!")
+    else:
+        print(f"\nHala {len(errors)} hata var. Manuel düzeltme gerekebilir.")
diff --git a/package.json b/package.json
index 5ed37bc..974ffe2 100644
--- a/package.json
+++ b/package.json
@@ -56,7 +56,8 @@
     "vitest": "^4.0.4"
   },
   "optionalDependencies": {
-    "hls.js": "^1.6.13"
+    "hls.js": "^1.6.13",
+    "flv.js": "^1.6.2"
   },
   "keywords": [
     "react",
@@ -64,6 +65,8 @@
     "player",
     "video-player",
     "hls",
+    "rtmp",
+    "flv",
     "streaming",
     "media"
   ],
diff --git a/src/components/ControlsLayer.css b/src/components/ControlsLayer.css
index f579e63..6678a7f 100644
--- a/src/components/ControlsLayer.css
+++ b/src/components/ControlsLayer.css
@@ -32,6 +32,11 @@
   z-index: 1;
 }
 
+.controls-layer > .center-play-overlay,
+.controls-layer > .loading-spinner-overlay {
+  position: absolute;
+}
+
 .controls-layer.hidden.playing {
   opacity: 0;
 }
diff --git a/src/components/VideoElement.tsx b/src/components/VideoElement.tsx
index ea6ac8d..33d36eb 100644
--- a/src/components/VideoElement.tsx
+++ b/src/components/VideoElement.tsx
@@ -4,6 +4,8 @@ import type { SubtitleTrack, AudioTrack, VideoQuality } from '../types'
 import { validateVideoURL, getCORSErrorMessage, isCORSError } from '../utils/corsHelper'
 import { setHlsAudioTrack, setHlsQualityLevel } from '../utils/hlsControl'
 import { setupHlsInstance } from '../utils/hlsSetup'
+import { setupRtmpInstance } from '../utils/rtmpSetup'
+import { detectVideoProtocol } from '../utils/videoProtocol'
 import { createSubtitleBlobURL } from '../utils/subtitles'
 import './VideoElement.css'
 
@@ -25,6 +27,7 @@ interface VideoElementProps {
   onSeeked?: () => void
   onAudioTracksLoaded?: (tracks: AudioTrack[]) => void
   onQualityLevelsLoaded?: (qualities: VideoQuality[]) => void
+  onSubtitleTracksLoaded?: (tracks: SubtitleTrack[]) => void
 }
 
 export const VideoElement: React.FC<VideoElementProps> = ({
@@ -45,11 +48,13 @@ export const VideoElement: React.FC<VideoElementProps> = ({
   onSeeked,
   onAudioTracksLoaded,
   onQualityLevelsLoaded,
+  onSubtitleTracksLoaded,
 }) => {
   const { videoRef, setVideoState, toggleFullscreen, settings, setQuality, setSubtitle } = usePlayerContext()
   const lastClickTimeRef = React.useRef<number>(0)
   const [availableAudioTracks, setAvailableAudioTracks] = useState<AudioTrack[]>([])
   const [availableQualities, setAvailableQualities] = useState<VideoQuality[]>([])
+  const [hlsSubtitles, setHlsSubtitles] = useState<SubtitleTrack[]>([])
   const [processedSubtitles, setProcessedSubtitles] = useState<SubtitleTrack[]>([])
   const subtitleBlobUrlsRef = React.useRef<string[]>([])
 
@@ -210,7 +215,7 @@ export const VideoElement: React.FC<VideoElementProps> = ({
     }
   }, [setVideoState])
 
-  // Process subtitles - convert SRT to VTT blob URLs
+  // Process subtitles - convert SRT to VTT blob URLs and merge with HLS subtitles
   useEffect(() => {
     let cancelled = false
 
@@ -218,14 +223,17 @@ export const VideoElement: React.FC<VideoElementProps> = ({
     subtitleBlobUrlsRef.current.forEach((url) => URL.revokeObjectURL(url))
     subtitleBlobUrlsRef.current = []
 
-    if (subtitles.length === 0) {
+    // Merge manual subtitles and HLS subtitles
+    const allSubtitles = [...subtitles, ...hlsSubtitles]
+
+    if (allSubtitles.length === 0) {
       setProcessedSubtitles([])
       return
     }
 
     const processSubtitles = async () => {
       const processed = await Promise.all(
-        subtitles.map(async (subtitle) => {
+        allSubtitles.map(async (subtitle) => {
           try {
             // Check if it's an SRT file
             if (subtitle.src.endsWith('.srt')) {
@@ -273,7 +281,7 @@ export const VideoElement: React.FC<VideoElementProps> = ({
       subtitleBlobUrlsRef.current.forEach((url) => URL.revokeObjectURL(url))
       subtitleBlobUrlsRef.current = []
     }
-  }, [subtitles])
+  }, [subtitles, hlsSubtitles])
 
   useEffect(() => {
     const video = videoRef.current
@@ -297,7 +305,7 @@ export const VideoElement: React.FC<VideoElementProps> = ({
     }
   }, [processedSubtitles, settings.subtitle, setSubtitle, videoRef])
 
-  // Detect HLS source and load hls.js if needed
+  // Detect video protocol and setup appropriate player
   useEffect(() => {
     const video = videoRef.current
     if (!video) return
@@ -306,6 +314,8 @@ export const VideoElement: React.FC<VideoElementProps> = ({
     onAudioTracksLoaded?.([])
     setAvailableQualities([])
     onQualityLevelsLoaded?.([])
+    setHlsSubtitles([])
+    onSubtitleTracksLoaded?.([])
 
     // Validate video URL first
     const validation = validateVideoURL(src)
@@ -316,57 +326,117 @@ export const VideoElement: React.FC<VideoElementProps> = ({
       return
     }
 
-    const isHLS = src.includes('.m3u8')
+    // Detect video protocol
+    const detection = detectVideoProtocol(src)
     let cleanupFn: (() => void) | null = null
 
-    const setupHls = async () => {
-      if (isHLS && video.canPlayType('application/vnd.apple.mpegurl') === '') {
-        try {
-          cleanupFn = await setupHlsInstance({
-            video,
-            src,
-            autoplay,
-            onAudioTracksLoaded: (tracks) => {
-              setAvailableAudioTracks(tracks)
-              onAudioTracksLoaded?.(tracks)
-            },
-            onQualityLevelsLoaded: (qualities) => {
-              setAvailableQualities(qualities)
-              onQualityLevelsLoaded?.(qualities)
-            },
-            onError: handleError,
-          })
-        } catch (err) {
-          let error: Error
-          if (err instanceof Error && isCORSError(err)) {
-            const corsMessage = getCORSErrorMessage(src)
-            error = new Error(corsMessage)
-          } else {
-            error = err instanceof Error ? err : new Error('Failed to load HLS')
+    console.log('[VideoElement] Source:', src)
+    console.log('[VideoElement] Detected protocol:', detection.protocol)
+    console.log('[VideoElement] Is live stream?', detection.isLive)
+    console.log('[VideoElement] Needs special player?', detection.needsSpecialPlayer)
+
+    const setupPlayer = async () => {
+      try {
+        switch (detection.protocol) {
+          case 'hls': {
+            // HLS streaming setup
+            const canPlayHLS = video.canPlayType('application/vnd.apple.mpegurl')
+            const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
+            const shouldUseHlsJs = canPlayHLS === '' || !isSafari
+
+            console.log('[VideoElement] Native HLS support?', canPlayHLS)
+            console.log('[VideoElement] Is Safari?', isSafari)
+            console.log('[VideoElement] Will use HLS.js?', shouldUseHlsJs)
+
+            if (shouldUseHlsJs) {
+              console.log('[VideoElement] Setting up HLS.js...')
+              cleanupFn = await setupHlsInstance({
+                video,
+                src,
+                autoplay,
+                onAudioTracksLoaded: (tracks) => {
+                  setAvailableAudioTracks(tracks)
+                  onAudioTracksLoaded?.(tracks)
+                },
+                onQualityLevelsLoaded: (qualities) => {
+                  setAvailableQualities(qualities)
+                  onQualityLevelsLoaded?.(qualities)
+                },
+                onSubtitleTracksLoaded: (tracks) => {
+                  setHlsSubtitles(tracks)
+                  onSubtitleTracksLoaded?.(tracks)
+                },
+                onError: handleError,
+              })
+            } else {
+              console.log('[VideoElement] Using native HLS playback')
+              video.src = src
+              if (autoplay) {
+                void video.play().catch(() => undefined)
+              }
+            }
+            break
+          }
+
+          case 'rtmp': {
+            // RTMP/FLV streaming setup
+            console.log('[VideoElement] Setting up RTMP/FLV player...')
+            cleanupFn = await setupRtmpInstance({
+              video,
+              src,
+              autoplay,
+              onError: handleError,
+              onLoadedMetadata,
+            })
+            break
+          }
+
+          case 'dash': {
+            // DASH streaming - not yet implemented
+            const error = new Error('DASH streaming is not yet supported')
+            console.error('[VideoElement]', error.message)
+            setVideoState((prev) => ({ ...prev, error, loading: false }))
+            onError?.(error)
+            break
+          }
+
+          case 'native':
+          default: {
+            // Native HTML5 video (MP4, WebM, etc.)
+            console.log('[VideoElement] Using native video.src')
+            video.src = src
+            if (autoplay) {
+              void video.play().catch(() => undefined)
+            }
+            break
           }
-          setVideoState((prev) => ({
-            ...prev,
-            error,
-            loading: false,
-          }))
-          onError?.(error)
         }
-      } else {
-        video.src = src
-        if (autoplay) {
-          void video.play().catch(() => undefined)
+      } catch (err) {
+        let error: Error
+        if (err instanceof Error && isCORSError(err)) {
+          const corsMessage = getCORSErrorMessage(src)
+          error = new Error(corsMessage)
+        } else {
+          error = err instanceof Error ? err : new Error(`Failed to load ${detection.protocol.toUpperCase()} video`)
         }
+        console.error('[VideoElement] Setup error:', error)
+        setVideoState((prev) => ({
+          ...prev,
+          error,
+          loading: false,
+        }))
+        onError?.(error)
       }
     }
 
-    setupHls()
+    setupPlayer()
 
     // Cleanup function
     return () => {
       if (cleanupFn) {
         cleanupFn()
       }
-      // Also check for any lingering HLS instance
+      // Also check for any lingering player instances
       if ((video as any).__hlsInstance) {
         const hls = (video as any).__hlsInstance
         if (hls && typeof hls.destroy === 'function') {
@@ -374,6 +444,13 @@ export const VideoElement: React.FC<VideoElementProps> = ({
         }
         delete (video as any).__hlsInstance
       }
+      if ((video as any).__rtmpInstance) {
+        const rtmp = (video as any).__rtmpInstance
+        if (rtmp && typeof rtmp.destroy === 'function') {
+          rtmp.destroy()
+        }
+        delete (video as any).__rtmpInstance
+      }
     }
   }, [
     src,
@@ -384,6 +461,8 @@ export const VideoElement: React.FC<VideoElementProps> = ({
     onError,
     onAudioTracksLoaded,
     onQualityLevelsLoaded,
+    onSubtitleTracksLoaded,
+    onLoadedMetadata,
   ])
 
   // Handle audio track changes
diff --git a/src/components/VideoPlayer.tsx b/src/components/VideoPlayer.tsx
index 5af7421..44cfa23 100644
--- a/src/components/VideoPlayer.tsx
+++ b/src/components/VideoPlayer.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState, useCallback } from 'react'
 import { PlayerProvider, usePlayerContext } from '../contexts/PlayerContext'
 import { VideoElement } from './VideoElement'
 import { ControlsLayer } from './ControlsLayer'
-import type { VideoPlayerProps, AudioTrack, VideoQuality } from '../types'
+import type { VideoPlayerProps, AudioTrack, VideoQuality, SubtitleTrack } from '../types'
 import '../styles/variables.css'
 import './VideoPlayer.css'
 
@@ -31,6 +31,8 @@ const VideoPlayerContent: React.FC<
     onAudioTracksLoadedInternal: (tracks: AudioTrack[]) => void
     qualities: VideoQuality[]
     onQualityLevelsLoadedInternal: (qualities: VideoQuality[]) => void
+    hlsSubtitles: SubtitleTrack[]
+    onSubtitleTracksLoadedInternal: (tracks: SubtitleTrack[]) => void
   }
 > = ({
   src,
@@ -57,10 +59,15 @@ const VideoPlayerContent: React.FC<
   onAudioTracksLoadedInternal,
   qualities,
   onQualityLevelsLoadedInternal,
+  hlsSubtitles,
+  onSubtitleTracksLoadedInternal,
 }) => {
   const { containerRef, uiState } = usePlayerContext()
   const controlsHiddenClass = !uiState.controlsVisible ? 'controls-hidden' : ''
 
+  // Merge manual subtitles and HLS-detected subtitles
+  const allSubtitles = [...subtitles, ...hlsSubtitles]
+
   return (
     <div ref={containerRef} className={`video-player ${controlsHiddenClass} ${className}`} style={style}>
       <VideoElement
@@ -81,12 +88,13 @@ const VideoPlayerContent: React.FC<
         onSeeked={onSeeked}
         onAudioTracksLoaded={onAudioTracksLoadedInternal}
         onQualityLevelsLoaded={onQualityLevelsLoadedInternal}
+        onSubtitleTracksLoaded={onSubtitleTracksLoadedInternal}
       />
       {controls && (
         <ControlsLayer
           keyboardShortcuts={keyboardShortcuts}
           pictureInPicture={pictureInPicture}
-          subtitles={subtitles}
+          subtitles={allSubtitles}
           audioTracks={audioTracks}
           qualities={qualities}
         />
@@ -121,6 +129,7 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
 }) => {
   const [audioTracks, setAudioTracks] = useState<AudioTrack[]>([])
   const [qualities, setQualities] = useState<VideoQuality[]>([])
+  const [hlsSubtitles, setHlsSubtitles] = useState<SubtitleTrack[]>([])
 
   // Apply theme CSS variables
   useEffect(() => {
@@ -141,6 +150,10 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
     setQualities(levels)
   }, [])
 
+  const handleSubtitleTracksLoaded = useCallback((tracks: SubtitleTrack[]) => {
+    setHlsSubtitles(tracks)
+  }, [])
+
   return (
     <PlayerProvider initialMuted={muted} language={language}>
       <VideoPlayerContent
@@ -168,6 +181,8 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
         onAudioTracksLoadedInternal={handleAudioTracksLoaded}
         qualities={qualities}
         onQualityLevelsLoadedInternal={handleQualityLevelsLoaded}
+        hlsSubtitles={hlsSubtitles}
+        onSubtitleTracksLoadedInternal={handleSubtitleTracksLoaded}
       />
     </PlayerProvider>
   )
diff --git a/src/components/controls/CenterPlayButton.css b/src/components/controls/CenterPlayButton.css
index 2bba3f5..b4b6908 100644
--- a/src/components/controls/CenterPlayButton.css
+++ b/src/components/controls/CenterPlayButton.css
@@ -9,8 +9,8 @@
 }
 
 .center-play-button {
-  width: 96px;
-  height: 96px;
+  width: 72px;
+  height: 72px;
   border-radius: var(--player-radius-full);
   background: linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0)),
     var(--player-primary);
@@ -21,7 +21,7 @@
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45), 0 12px 28px rgba(239, 68, 68, 0.28);
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35), 0 8px 16px rgba(239, 68, 68, 0.2);
   transition: background-color var(--player-transition-fast) ease,
     color var(--player-transition-fast) ease, transform var(--player-transition-fast) ease,
     box-shadow var(--player-transition-normal) ease;
@@ -30,8 +30,8 @@
 
 .center-play-button:hover {
   background-color: var(--player-primary-hover);
-  transform: scale(1.05);
-  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.5), 0 14px 32px rgba(239, 68, 68, 0.32);
+  transform: scale(1.08);
+  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4), 0 10px 20px rgba(239, 68, 68, 0.25);
 }
 
 .center-play-button:active {
@@ -45,19 +45,19 @@
 }
 
 .center-play-button svg {
-  width: 44px;
-  height: 44px;
-  margin-left: 4px;
+  width: 36px;
+  height: 36px;
+  margin-left: 3px;
 }
 
 @media (max-width: 640px) {
   .center-play-button {
-    width: 74px;
-    height: 74px;
+    width: 64px;
+    height: 64px;
   }
 
   .center-play-button svg {
-    width: 34px;
-    height: 34px;
+    width: 30px;
+    height: 30px;
   }
 }
diff --git a/src/components/controls/ProgressBar.css b/src/components/controls/ProgressBar.css
index 738ca36..37ff9c2 100644
--- a/src/components/controls/ProgressBar.css
+++ b/src/components/controls/ProgressBar.css
@@ -13,7 +13,7 @@
   height: 3px;
   background-color: var(--player-progress-bg);
   border-radius: var(--player-radius-full);
-  overflow: hidden;
+  overflow: visible;
   transition: height var(--player-transition-fast) ease;
 }
 
@@ -27,6 +27,7 @@
   inset: 0;
   width: 0;
   background-color: var(--player-progress-buffered);
+  border-radius: var(--player-radius-full);
   transition: width 0.12s ease;
 }
 
@@ -35,6 +36,7 @@
   inset: 0;
   width: 0;
   background-color: var(--player-primary);
+  border-radius: var(--player-radius-full);
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -46,14 +48,16 @@
   height: 12px;
   border-radius: 50%;
   background-color: var(--player-primary);
-  transform: scale(0);
-  transition: transform var(--player-transition-fast) ease;
+  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
+  transform: scale(1);
+  transition: transform var(--player-transition-fast) ease, box-shadow var(--player-transition-fast) ease;
   margin-right: -6px;
 }
 
 .progress-bar:hover .progress-handle,
 .progress-bar.seeking .progress-handle {
-  transform: scale(1);
+  transform: scale(1.15);
+  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2);
 }
 
 .progress-tooltip {
diff --git a/src/components/controls/VolumeControl.css b/src/components/controls/VolumeControl.css
index 4034113..1f54424 100644
--- a/src/components/controls/VolumeControl.css
+++ b/src/components/controls/VolumeControl.css
@@ -11,7 +11,7 @@
   height: 4px;
   background-color: var(--player-progress-bg);
   border-radius: var(--player-radius-full);
-  overflow: hidden;
+  overflow: visible;
   opacity: 0;
   transition: width var(--player-transition-normal) ease,
     opacity var(--player-transition-normal) ease;
@@ -51,6 +51,14 @@
   background-color: var(--player-primary);
   border: none;
   margin-top: -4px;
+  cursor: pointer;
+  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.3);
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.volume-slider:hover::-webkit-slider-thumb {
+  transform: scale(1.15);
+  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2);
 }
 
 .volume-slider::-moz-range-track {
@@ -64,11 +72,21 @@
   border-radius: 50%;
   background-color: var(--player-primary);
   border: none;
+  cursor: pointer;
+  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.3);
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.volume-slider:hover::-moz-range-thumb {
+  transform: scale(1.15);
+  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2);
 }
 
 .volume-slider-fill {
   position: absolute;
-  inset: 0;
+  top: 0;
+  left: 0;
+  bottom: 0;
   width: 0;
   background: var(--player-primary);
   border-radius: var(--player-radius-full);
diff --git a/src/components/overlays/LoadingSpinner.css b/src/components/overlays/LoadingSpinner.css
index 1f9c40f..296caab 100644
--- a/src/components/overlays/LoadingSpinner.css
+++ b/src/components/overlays/LoadingSpinner.css
@@ -4,7 +4,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: rgba(0, 0, 0, 0.28);
+  background-color: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(2px);
   z-index: var(--player-z-loading);
   pointer-events: none;
 }
diff --git a/src/flv.d.ts b/src/flv.d.ts
new file mode 100644
index 0000000..b006620
--- /dev/null
+++ b/src/flv.d.ts
@@ -0,0 +1,9 @@
+/**
+ * Type declarations for optional flv.js module
+ * Since flv.js is an optional dependency that may not be installed,
+ * we declare it as a module that can be dynamically imported
+ */
+declare module 'flv.js' {
+  const content: any
+  export default content
+}
diff --git a/src/types/index.ts b/src/types/index.ts
index 1b91010..3ea68cb 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,5 +1,7 @@
 import type { CSSProperties, MutableRefObject } from 'react'
 
+export type VideoProtocol = 'native' | 'hls' | 'rtmp' | 'dash'
+
 export interface SubtitleTrack {
   src: string
   lang: string
diff --git a/src/utils/hlsLoader.ts b/src/utils/hlsLoader.ts
index 0cfff08..dd2c8a0 100644
--- a/src/utils/hlsLoader.ts
+++ b/src/utils/hlsLoader.ts
@@ -3,7 +3,7 @@
  * Handles loading hls.js from npm or CDN
  */
 
-import type { AudioTrack, VideoQuality } from '../types'
+import type { AudioTrack, VideoQuality, SubtitleTrack } from '../types'
 import { getTranslations, detectBrowserLanguage } from '../i18n'
 
 // Re-export control functions for backward compatibility
@@ -47,15 +47,20 @@ const loadHlsFromCDN = (): Promise<any> => {
  */
 export const loadHls = async (): Promise<any> => {
   try {
+    console.log('[HLS Loader] Attempting to load from npm package...')
     // Try loading from npm package first
     const hlsModule = await import('hls.js')
+    console.log('[HLS Loader] Successfully loaded from npm package')
     return hlsModule.default
-  } catch {
+  } catch (npmError) {
+    console.warn('[HLS Loader] Failed to load from npm, trying CDN...', npmError)
     try {
       // Fallback to CDN
       const Hls = await loadHlsFromCDN()
+      console.log('[HLS Loader] Successfully loaded from CDN')
       return Hls
-    } catch {
+    } catch (cdnError) {
+      console.error('[HLS Loader] Failed to load from CDN:', cdnError)
       throw new Error('Unable to load HLS.js library. HLS streaming is not available.')
     }
   }
@@ -82,14 +87,18 @@ export const hasNativeHlsSupport = (): boolean => {
 export const getHlsAudioTracks = (hls: any): AudioTrack[] => {
   try {
     if (!hls) {
+      console.warn('[HLS Loader] getHlsAudioTracks: No HLS instance provided')
       return []
     }
 
     // Check if audioTracks property exists
     if (!hls.audioTracks || !Array.isArray(hls.audioTracks)) {
+      console.warn('[HLS Loader] getHlsAudioTracks: No audioTracks array found on HLS instance')
       return []
     }
 
+    console.log('[HLS Loader] getHlsAudioTracks: Raw audioTracks from HLS:', hls.audioTracks)
+
     const audioTracks: AudioTrack[] = hls.audioTracks.map((track: any, index: number) => {
       const audioTrack = {
         name: track.name || track.label || `Audio ${index + 1}`,
@@ -102,7 +111,38 @@ export const getHlsAudioTracks = (hls: any): AudioTrack[] => {
       return audioTrack
     })
 
+    console.log('[HLS Loader] getHlsAudioTracks: Processed tracks:', audioTracks)
     return audioTracks
+  } catch (error) {
+    console.error('[HLS Loader] getHlsAudioTracks: Error extracting audio tracks:', error)
+    return []
+  }
+}
+
+/**
+ * Extract subtitle tracks from HLS instance
+ */
+export const getHlsSubtitleTracks = (hls: any): SubtitleTrack[] => {
+  try {
+    if (!hls) {
+      return []
+    }
+
+    // Check if subtitleTracks property exists
+    if (!hls.subtitleTracks || !Array.isArray(hls.subtitleTracks)) {
+      return []
+    }
+
+    const subtitleTracks: SubtitleTrack[] = hls.subtitleTracks.map((track: any, index: number) => {
+      return {
+        label: track.name || track.label || `Subtitle ${index + 1}`,
+        lang: track.lang || track.language || 'unknown',
+        src: track.url || '',
+        default: track.default || false,
+      }
+    })
+
+    return subtitleTracks
   } catch {
     return []
   }
@@ -113,10 +153,18 @@ export const getHlsAudioTracks = (hls: any): AudioTrack[] => {
  */
 export const getHlsQualities = (hls: any): VideoQuality[] => {
   try {
-    if (!hls || !Array.isArray(hls.levels)) {
+    if (!hls) {
+      console.warn('[HLS Loader] getHlsQualities: No HLS instance provided')
       return []
     }
 
+    if (!Array.isArray(hls.levels)) {
+      console.warn('[HLS Loader] getHlsQualities: No levels array found on HLS instance')
+      return []
+    }
+
+    console.log('[HLS Loader] getHlsQualities: Raw levels from HLS:', hls.levels)
+
     const qualities: VideoQuality[] = hls.levels.map((level: any, index: number) => {
       const resolution = typeof level.attrs?.RESOLUTION === 'string' ? level.attrs.RESOLUTION : undefined
       const [widthFromResolution, heightFromResolution] = resolution
@@ -149,14 +197,18 @@ export const getHlsQualities = (hls: any): VideoQuality[] => {
       }
     })
 
-    return qualities.sort((a, b) => {
+    const sortedQualities = qualities.sort((a, b) => {
       const heightDifference = (b.height || 0) - (a.height || 0)
       if (heightDifference !== 0) {
         return heightDifference
       }
       return (b.bitrate || 0) - (a.bitrate || 0)
     })
-  } catch {
+
+    console.log('[HLS Loader] getHlsQualities: Processed qualities:', sortedQualities)
+    return sortedQualities
+  } catch (error) {
+    console.error('[HLS Loader] getHlsQualities: Error extracting qualities:', error)
     return []
   }
 }
diff --git a/src/utils/hlsSetup.ts b/src/utils/hlsSetup.ts
index 8d4f684..4890ca2 100644
--- a/src/utils/hlsSetup.ts
+++ b/src/utils/hlsSetup.ts
@@ -2,7 +2,7 @@
  * HLS setup and configuration utilities
  */
 
-import type { AudioTrack, VideoQuality } from '../types'
+import type { AudioTrack, VideoQuality, SubtitleTrack } from '../types'
 
 interface HlsSetupOptions {
   video: HTMLVideoElement
@@ -10,6 +10,7 @@ interface HlsSetupOptions {
   autoplay: boolean
   onAudioTracksLoaded?: (tracks: AudioTrack[]) => void
   onQualityLevelsLoaded?: (qualities: VideoQuality[]) => void
+  onSubtitleTracksLoaded?: (tracks: SubtitleTrack[]) => void
   onError?: (error: Error) => void
 }
 
@@ -19,47 +20,100 @@ export const setupHlsInstance = async ({
   autoplay,
   onAudioTracksLoaded,
   onQualityLevelsLoaded,
+  onSubtitleTracksLoaded,
   onError,
 }: HlsSetupOptions): Promise<() => void> => {
-  const { loadHls, isHlsSupported, getHlsAudioTracks, getHlsQualities } = await import('./hlsLoader')
+  const { loadHls, isHlsSupported, getHlsAudioTracks, getHlsQualities, getHlsSubtitleTracks } = await import('./hlsLoader')
   const Hls = await loadHls()
 
   if (!isHlsSupported(Hls)) {
     throw new Error('HLS.js is not supported in this browser')
   }
 
+  console.log('[HLS Setup] Creating HLS instance for:', src)
+
   const hls = new Hls({
     enableWorker: true,
     lowLatencyMode: false,
+    debug: false,
   })
 
   hls.loadSource(src)
   hls.attachMedia(video)
 
+  let manifestParsedHandled = false
+
   hls.on(Hls.Events.MANIFEST_PARSED, () => {
-    setTimeout(() => {
+    console.log('[HLS Setup] MANIFEST_PARSED event fired')
+
+    if (manifestParsedHandled) {
+      console.warn('[HLS Setup] MANIFEST_PARSED already handled, skipping')
+      return
+    }
+    manifestParsedHandled = true
+
+    // Wait for tracks to be fully populated
+    const loadTracks = () => {
       const tracks = getHlsAudioTracks(hls)
       const qualities = getHlsQualities(hls)
+      const subtitles = getHlsSubtitleTracks(hls)
+
+      console.log('[HLS Setup] Detected tracks:', {
+        audioTracks: tracks.length,
+        qualities: qualities.length,
+        subtitles: subtitles.length
+      })
 
       if (tracks.length > 0) {
+        console.log('[HLS Setup] Loading audio tracks:', tracks)
         onAudioTracksLoaded?.(tracks)
       }
 
+      if (subtitles.length > 0) {
+        console.log('[HLS Setup] Loading subtitle tracks:', subtitles)
+        onSubtitleTracksLoaded?.(subtitles)
+      }
+
+      console.log('[HLS Setup] Loading quality levels:', qualities)
       onQualityLevelsLoaded?.(qualities)
-    }, 100)
+    }
+
+    // Try immediately first
+    loadTracks()
+
+    // Also retry after a delay for Chrome compatibility
+    setTimeout(loadTracks, 200)
 
     if (autoplay) {
       void video.play().catch(() => undefined)
     }
   })
 
+  // Listen for LEVEL_LOADED to ensure qualities are populated
+  hls.on(Hls.Events.LEVEL_LOADED, () => {
+    const qualities = getHlsQualities(hls)
+    if (qualities.length > 0) {
+      console.log('[HLS Setup] LEVEL_LOADED - Qualities available:', qualities.length)
+      onQualityLevelsLoaded?.(qualities)
+    }
+  })
+
   hls.on(Hls.Events.AUDIO_TRACKS_UPDATED, () => {
     const tracks = getHlsAudioTracks(hls)
+    console.log('[HLS Setup] AUDIO_TRACKS_UPDATED event:', tracks.length, 'tracks')
     if (tracks.length > 0) {
       onAudioTracksLoaded?.(tracks)
     }
   })
 
+  hls.on(Hls.Events.SUBTITLE_TRACKS_UPDATED, () => {
+    const subtitles = getHlsSubtitleTracks(hls)
+    console.log('[HLS Setup] SUBTITLE_TRACKS_UPDATED event:', subtitles.length, 'tracks')
+    if (subtitles.length > 0) {
+      onSubtitleTracksLoaded?.(subtitles)
+    }
+  })
+
   hls.on(Hls.Events.ERROR, (_event: any, data: any) => {
     if (data.fatal) {
       switch (data.type) {
diff --git a/src/utils/m3u8Parser.ts b/src/utils/m3u8Parser.ts
index fe98396..a1af872 100644
--- a/src/utils/m3u8Parser.ts
+++ b/src/utils/m3u8Parser.ts
@@ -1,4 +1,4 @@
-import type { AudioTrack } from '../types'
+import type { AudioTrack, SubtitleTrack } from '../types'
 
 /**
  * Parses M3U8 manifest to extract audio tracks
@@ -73,6 +73,75 @@ const parseAudioMediaTag = (line: string): AudioTrack | null => {
   }
 }
 
+/**
+ * Parses M3U8 manifest to extract subtitle tracks
+ */
+export const parseM3U8SubtitleTracks = (manifestContent: string): SubtitleTrack[] => {
+  const subtitleTracks: SubtitleTrack[] = []
+  const lines = manifestContent.split('\n')
+
+  for (const line of lines) {
+    if (line.startsWith('#EXT-X-MEDIA:TYPE=SUBTITLES')) {
+      const track = parseSubtitleMediaTag(line)
+      if (track) {
+        subtitleTracks.push(track)
+      }
+    }
+  }
+
+  return subtitleTracks
+}
+
+/**
+ * Parses a single #EXT-X-MEDIA:TYPE=SUBTITLES line
+ * Example: #EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME="English",DEFAULT=YES,AUTOSELECT=YES,FORCED=NO,LANGUAGE="en",URI="subtitles_en.m3u8"
+ */
+const parseSubtitleMediaTag = (line: string): SubtitleTrack | null => {
+  try {
+    const attributes: Record<string, string> = {}
+
+    // Extract all key-value pairs
+    const regex = /(\w+(?:-\w+)*)=("(?:[^"\\]|\\.)*"|[^,]+)/g
+    let match
+
+    while ((match = regex.exec(line)) !== null) {
+      const key = match[1]
+      let value = match[2]
+
+      // Remove quotes if present
+      if (value.startsWith('"') && value.endsWith('"')) {
+        value = value.slice(1, -1)
+      }
+
+      attributes[key] = value
+    }
+
+    // Only process if it's a SUBTITLES type
+    if (attributes['TYPE'] !== 'SUBTITLES') {
+      return null
+    }
+
+    // Extract required fields
+    const name = attributes['NAME']
+    const language = attributes['LANGUAGE'] || attributes['LANG'] || 'unknown'
+    const uri = attributes['URI']
+    const defaultTrack = attributes['DEFAULT'] === 'YES'
+
+    if (!name || !uri) {
+      return null
+    }
+
+    return {
+      label: name,
+      lang: language,
+      src: uri,
+      default: defaultTrack,
+    }
+  } catch {
+    return null
+  }
+}
+
 /**
  * Fetches and parses M3U8 manifest from URL
  */
@@ -89,3 +158,20 @@ export const fetchAndParseM3U8 = async (url: string): Promise<AudioTrack[]> => {
     return []
   }
 }
+
+/**
+ * Fetches and parses M3U8 subtitle tracks from URL
+ */
+export const fetchAndParseM3U8Subtitles = async (url: string): Promise<SubtitleTrack[]> => {
+  try {
+    const response = await fetch(url)
+    if (!response.ok) {
+      throw new Error(`Failed to fetch M3U8: ${response.statusText}`)
+    }
+
+    const manifestContent = await response.text()
+    return parseM3U8SubtitleTracks(manifestContent)
+  } catch {
+    return []
+  }
+}
diff --git a/src/utils/rtmpLoader.ts b/src/utils/rtmpLoader.ts
new file mode 100644
index 0000000..af5fb3d
--- /dev/null
+++ b/src/utils/rtmpLoader.ts
@@ -0,0 +1,168 @@
+/**
+ * RTMP/FLV player dynamic loader
+ * Loads flv.js library with NPM fallback to CDN strategy
+ * Mirrors the HLS loader pattern for consistency
+ */
+
+const FLVJS_CDN_URL = 'https://cdn.jsdelivr.net/npm/flv.js@1.6.2/dist/flv.min.js'
+
+/**
+ * Dynamically loads flv.js from CDN
+ * @returns Promise that resolves to the flv.js library
+ */
+const loadFlvjsFromCDN = async (): Promise<any> => {
+  return new Promise((resolve, reject) => {
+    if ((window as any).flvjs) {
+      resolve((window as any).flvjs)
+      return
+    }
+
+    const script = document.createElement('script')
+    script.src = FLVJS_CDN_URL
+    script.async = true
+
+    script.onload = () => {
+      if ((window as any).flvjs) {
+        resolve((window as any).flvjs)
+      } else {
+        reject(new Error('flv.js loaded but not available on window'))
+      }
+    }
+
+    script.onerror = () => {
+      reject(new Error(`Failed to load flv.js from CDN: ${FLVJS_CDN_URL}`))
+    }
+
+    document.head.appendChild(script)
+  })
+}
+
+/**
+ * Loads flv.js library
+ * Tries NPM package first, falls back to CDN if unavailable
+ * @returns Promise that resolves to the flv.js library
+ */
+export const loadFlvjs = async (): Promise<any> => {
+  try {
+    // Try loading from NPM package first
+    const flvModule = await import('flv.js')
+    return flvModule.default || flvModule
+  } catch (npmError) {
+    console.warn('flv.js NPM package not available, loading from CDN...', npmError)
+
+    try {
+      // Fallback to CDN
+      const flvjs = await loadFlvjsFromCDN()
+      return flvjs
+    } catch (cdnError) {
+      console.error('Failed to load flv.js from both NPM and CDN', cdnError)
+      throw new Error(
+        'Failed to load flv.js library. Please ensure flv.js is available or check your network connection.'
+      )
+    }
+  }
+}
+
+/**
+ * Checks if flv.js is supported in the current browser
+ * @param flvjs - The flv.js library instance
+ * @returns True if supported
+ */
+export const isFlvjsSupported = (flvjs: any): boolean => {
+  if (!flvjs) {
+    return false
+  }
+
+  // flv.js requires Media Source Extensions (MSE)
+  return flvjs.isSupported ? flvjs.isSupported() : false
+}
+
+/**
+ * Gets browser support information for flv.js
+ * @param flvjs - The flv.js library instance
+ * @returns Support information object
+ */
+export const getFlvjsSupportInfo = (flvjs: any): {
+  mseSupported: boolean
+  networkStreamIOSupported: boolean
+  httpsSupported: boolean
+} => {
+  if (!flvjs || !flvjs.getFeatureList) {
+    return {
+      mseSupported: false,
+      networkStreamIOSupported: false,
+      httpsSupported: false,
+    }
+  }
+
+  const features = flvjs.getFeatureList()
+  return {
+    mseSupported: features.mseSupported || false,
+    networkStreamIOSupported: features.networkStreamIOSupported || false,
+    httpsSupported: features.httpsSupported || false,
+  }
+}
+
+/**
+ * Creates default flv.js configuration for RTMP/FLV streams
+ * @param isLive - Whether the stream is live
+ * @returns flv.js configuration object
+ */
+export const createDefaultFlvConfig = (isLive: boolean = true) => {
+  return {
+    enableWorker: true, // Enable worker for better performance
+    enableStashBuffer: !isLive, // Disable stash buffer for live streams (low latency)
+    stashInitialSize: isLive ? 128 : undefined, // Smaller initial size for live
+    isLive: isLive,
+    lazyLoad: false,
+    lazyLoadMaxDuration: 3 * 60, // 3 minutes for VOD
+    lazyLoadRecoverDuration: 30, // 30 seconds
+    deferLoadAfterSourceOpen: false,
+    autoCleanupSourceBuffer: true,
+    autoCleanupMaxBackwardDuration: 3 * 60, // 3 minutes
+    autoCleanupMinBackwardDuration: 2 * 60, // 2 minutes
+    fixAudioTimestampGap: true,
+    accurateSeek: !isLive, // Disable accurate seek for live streams
+    seekType: isLive ? 'range' : 'param',
+    seekParamStart: 'start',
+    rangeLoadZeroStart: false,
+    reuseRedirectedURL: true,
+  }
+}
+
+/**
+ * Extracts quality information from flv.js statistics (if available)
+ * Note: Unlike HLS, FLV/RTMP streams typically don't have multiple quality levels
+ * This is primarily for metadata display
+ * @param player - The flv.js player instance
+ * @returns Basic quality information
+ */
+export const extractFlvQualityInfo = (player: any): {
+  width?: number
+  height?: number
+  videoCodec?: string
+  audioCodec?: string
+  fps?: number
+  videoBitrate?: number
+  audioBitrate?: number
+} | null => {
+  if (!player || !player.statisticsInfo) {
+    return null
+  }
+
+  try {
+    const stats = player.statisticsInfo
+    return {
+      width: stats.videoWidth,
+      height: stats.videoHeight,
+      videoCodec: stats.videoCodec,
+      audioCodec: stats.audioCodec,
+      fps: stats.fps,
+      videoBitrate: stats.videoBitrate,
+      audioBitrate: stats.audioBitrate,
+    }
+  } catch (error) {
+    console.warn('Failed to extract flv.js quality info:', error)
+    return null
+  }
+}
diff --git a/src/utils/rtmpSetup.ts b/src/utils/rtmpSetup.ts
new file mode 100644
index 0000000..816d528
--- /dev/null
+++ b/src/utils/rtmpSetup.ts
@@ -0,0 +1,240 @@
+/**
+ * RTMP/FLV player setup utility
+ * Initializes and configures flv.js player for RTMP/FLV streams
+ * Mirrors the HLS setup pattern for consistency
+ */
+
+import { loadFlvjs, isFlvjsSupported, createDefaultFlvConfig } from './rtmpLoader'
+import { isLiveStream } from './videoProtocol'
+
+export interface RtmpSetupOptions {
+  video: HTMLVideoElement
+  src: string
+  autoplay?: boolean
+  onError?: (error: Error) => void
+  onLoadedMetadata?: () => void
+}
+
+/**
+ * Sets up flv.js player instance for RTMP/FLV streaming
+ * @param options - Setup options
+ * @returns Cleanup function to destroy the player
+ */
+export const setupRtmpInstance = async ({
+  video,
+  src,
+  autoplay = false,
+  onError,
+  onLoadedMetadata,
+}: RtmpSetupOptions): Promise<() => void> => {
+  try {
+    // Load flv.js library
+    const flvjs = await loadFlvjs()
+
+    // Check if flv.js is supported
+    if (!isFlvjsSupported(flvjs)) {
+      const error = new Error(
+        'flv.js is not supported in this browser. Media Source Extensions (MSE) is required.'
+      )
+      if (onError) {
+        onError(error)
+      }
+      throw error
+    }
+
+    // Detect if stream is live
+    const isLive = isLiveStream(src)
+
+    // Determine media type
+    let type = 'flv'
+    if (src.startsWith('rtmp://') || src.startsWith('rtmps://')) {
+      // For RTMP URLs, flv.js expects HTTP-FLV endpoint
+      // This is a limitation - direct RTMP playback requires server-side conversion
+      console.warn(
+        'Direct RTMP playback requires an HTTP-FLV proxy. Please ensure your RTMP stream is available via HTTP-FLV.'
+      )
+      type = 'flv'
+    } else if (src.includes('.flv')) {
+      type = 'flv'
+    }
+
+    // Create flv.js player configuration
+    const config = createDefaultFlvConfig(isLive)
+
+    // Create player instance
+    const player = flvjs.createPlayer(
+      {
+        type: type,
+        url: src,
+        isLive: isLive,
+        hasAudio: true,
+        hasVideo: true,
+      },
+      config
+    )
+
+    // Attach to video element
+    player.attachMediaElement(video)
+
+    // Load the stream
+    player.load()
+
+    // Store player instance on video element for later access
+    ;(video as any).__rtmpInstance = player
+
+    // Event handlers
+    player.on(flvjs.Events.ERROR, (errorType: string, errorDetail: string, errorInfo: any) => {
+      console.error('flv.js error:', { errorType, errorDetail, errorInfo })
+
+      const error = new Error(`FLV Player Error: ${errorType} - ${errorDetail}`)
+
+      // Handle specific error types
+      if (errorType === flvjs.ErrorTypes.NETWORK_ERROR) {
+        console.error('Network error occurred:', errorDetail)
+
+        // Attempt recovery for recoverable network errors
+        if (
+          errorDetail === flvjs.ErrorDetails.NETWORK_EXCEPTION ||
+          errorDetail === flvjs.ErrorDetails.NETWORK_STATUS_CODE_INVALID
+        ) {
+          console.log('Attempting to recover from network error...')
+          try {
+            player.unload()
+            player.load()
+            return
+          } catch (recoveryError) {
+            console.error('Failed to recover from network error:', recoveryError)
+          }
+        }
+      } else if (errorType === flvjs.ErrorTypes.MEDIA_ERROR) {
+        console.error('Media error occurred:', errorDetail)
+
+        // Some media errors are recoverable
+        if (errorDetail === flvjs.ErrorDetails.MEDIA_MSE_ERROR) {
+          console.log('Attempting to recover from media error...')
+          try {
+            player.unload()
+            player.load()
+            return
+          } catch (recoveryError) {
+            console.error('Failed to recover from media error:', recoveryError)
+          }
+        }
+      }
+
+      // Call error callback
+      if (onError) {
+        onError(error)
+      }
+    })
+
+    player.on(flvjs.Events.LOADING_COMPLETE, () => {
+      console.log('flv.js: Loading complete')
+    })
+
+    player.on(flvjs.Events.RECOVERED_EARLY_EOF, () => {
+      console.log('flv.js: Recovered from early EOF')
+    })
+
+    player.on(flvjs.Events.METADATA_ARRIVED, (metadata: any) => {
+      console.log('flv.js: Metadata arrived', metadata)
+
+      // Trigger onLoadedMetadata callback
+      if (onLoadedMetadata) {
+        onLoadedMetadata()
+      }
+    })
+
+    player.on(flvjs.Events.STATISTICS_INFO, (stats: any) => {
+      // Statistics info for debugging/monitoring
+      // Can be used to display stream quality, bitrate, etc.
+      if (stats) {
+        ;(video as any).__rtmpStats = stats
+      }
+    })
+
+    // Auto-play if requested
+    if (autoplay) {
+      try {
+        await video.play()
+      } catch (playError) {
+        console.warn('Autoplay failed:', playError)
+        // Autoplay might be blocked by browser, ignore error
+      }
+    }
+
+    // Return cleanup function
+    return () => {
+      try {
+        console.log('Cleaning up flv.js player...')
+
+        // Remove event listeners
+        player.off(flvjs.Events.ERROR)
+        player.off(flvjs.Events.LOADING_COMPLETE)
+        player.off(flvjs.Events.RECOVERED_EARLY_EOF)
+        player.off(flvjs.Events.METADATA_ARRIVED)
+        player.off(flvjs.Events.STATISTICS_INFO)
+
+        // Pause and unload
+        video.pause()
+        player.unload()
+
+        // Detach from video element
+        player.detachMediaElement()
+
+        // Destroy player instance
+        player.destroy()
+
+        // Clean up stored references
+        delete (video as any).__rtmpInstance
+        delete (video as any).__rtmpStats
+      } catch (cleanupError) {
+        console.error('Error during flv.js cleanup:', cleanupError)
+      }
+    }
+  } catch (error) {
+    console.error('Failed to setup flv.js player:', error)
+
+    const setupError =
+      error instanceof Error ? error : new Error('Failed to setup RTMP/FLV player')
+
+    if (onError) {
+      onError(setupError)
+    }
+
+    throw setupError
+  }
+}
+
+/**
+ * Gets the current flv.js player instance from a video element
+ * @param video - The video element
+ * @returns The flv.js player instance or null
+ */
+export const getRtmpInstance = (video: HTMLVideoElement | null): any | null => {
+  if (!video) {
+    return null
+  }
+  return (video as any).__rtmpInstance || null
+}
+
+/**
+ * Gets the current flv.js statistics from a video element
+ * @param video - The video element
+ * @returns The statistics object or null
+ */
+export const getRtmpStats = (video: HTMLVideoElement | null): any | null => {
+  if (!video) {
+    return null
+  }
+  return (video as any).__rtmpStats || null
+}
+
+/**
+ * Checks if a video element has an active RTMP player instance
+ * @param video - The video element
+ * @returns True if has active instance
+ */
+export const hasRtmpInstance = (video: HTMLVideoElement | null): boolean => {
+  return getRtmpInstance(video) !== null
+}
diff --git a/src/utils/videoProtocol.ts b/src/utils/videoProtocol.ts
new file mode 100644
index 0000000..7977f71
--- /dev/null
+++ b/src/utils/videoProtocol.ts
@@ -0,0 +1,110 @@
+/**
+ * Video protocol detection utility
+ * Detects the streaming protocol from a video URL
+ */
+
+export type VideoProtocol = 'native' | 'hls' | 'rtmp' | 'dash'
+
+export interface ProtocolDetectionResult {
+  protocol: VideoProtocol
+  isLive: boolean
+  needsSpecialPlayer: boolean
+}
+
+/**
+ * Detects the video protocol from the source URL
+ * @param src - The video source URL
+ * @returns Protocol detection result
+ */
+export const detectVideoProtocol = (src: string): ProtocolDetectionResult => {
+  if (!src) {
+    return {
+      protocol: 'native',
+      isLive: false,
+      needsSpecialPlayer: false,
+    }
+  }
+
+  const lowerSrc = src.toLowerCase()
+
+  // RTMP protocol detection
+  // Supports: rtmp://, rtmps://, rtmpt://, rtmpe://
+  if (
+    lowerSrc.startsWith('rtmp://') ||
+    lowerSrc.startsWith('rtmps://') ||
+    lowerSrc.startsWith('rtmpt://') ||
+    lowerSrc.startsWith('rtmpe://')
+  ) {
+    return {
+      protocol: 'rtmp',
+      isLive: true, // RTMP is typically used for live streaming
+      needsSpecialPlayer: true,
+    }
+  }
+
+  // HLS protocol detection
+  // Check for .m3u8 extension or HLS URL patterns
+  if (lowerSrc.includes('.m3u8')) {
+    return {
+      protocol: 'hls',
+      isLive: lowerSrc.includes('/live/') || lowerSrc.includes('live.m3u8'),
+      needsSpecialPlayer: true,
+    }
+  }
+
+  // DASH protocol detection
+  // Check for .mpd extension
+  if (lowerSrc.includes('.mpd')) {
+    return {
+      protocol: 'dash',
+      isLive: lowerSrc.includes('/live/') || lowerSrc.includes('live.mpd'),
+      needsSpecialPlayer: true,
+    }
+  }
+
+  // HTTP-FLV detection (alternative to RTMP)
+  if (lowerSrc.includes('.flv') || lowerSrc.includes('flv?')) {
+    return {
+      protocol: 'rtmp', // Use RTMP player for FLV files
+      isLive: lowerSrc.includes('/live/') || lowerSrc.includes('live.flv'),
+      needsSpecialPlayer: true,
+    }
+  }
+
+  // Native HTML5 video formats (MP4, WebM, OGG, etc.)
+  return {
+    protocol: 'native',
+    isLive: false,
+    needsSpecialPlayer: false,
+  }
+}
+
+/**
+ * Checks if the URL is an RTMP stream
+ * @param src - The video source URL
+ * @returns True if RTMP stream
+ */
+export const isRtmpStream = (src: string): boolean => {
+  const detection = detectVideoProtocol(src)
+  return detection.protocol === 'rtmp'
+}
+
+/**
+ * Checks if the URL is an HLS stream
+ * @param src - The video source URL
+ * @returns True if HLS stream
+ */
+export const isHlsStream = (src: string): boolean => {
+  const detection = detectVideoProtocol(src)
+  return detection.protocol === 'hls'
+}
+
+/**
+ * Checks if the stream is live
+ * @param src - The video source URL
+ * @returns True if live stream
+ */
+export const isLiveStream = (src: string): boolean => {
+  const detection = detectVideoProtocol(src)
+  return detection.isLive
+}
diff --git a/vite.config.lib.ts b/vite.config.lib.ts
index 00a723a..95f491a 100644
--- a/vite.config.lib.ts
+++ b/vite.config.lib.ts
@@ -41,12 +41,13 @@ export default defineConfig({
       },
     },
     rollupOptions: {
-      external: ['react', 'react-dom', 'hls.js'],
+      external: ['react', 'react-dom', 'hls.js', 'flv.js'],
       output: {
         globals: {
           react: 'React',
           'react-dom': 'ReactDOM',
           'hls.js': 'Hls',
+          'flv.js': 'flvjs',
         },
         compact: true,
       },
diff --git a/vite.config.ts b/vite.config.ts
index e2f45a7..ddb98da 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -5,6 +5,7 @@ import path from 'path'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  base: '/player/',
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src'),