HLS oynatıcı gelişmiş özellikler: altyazı, çoklu bitrate ve ekran görüntüsü kılavuzu

Harika bir video oynatıcı, sadece “oynatabilmek” değildir. Çoklu bitrate değişimi, çok dilli altyazılar ve oynatıcı içi ekran görüntüsü gibi gelişmiş özellikler üstün bir kullanıcı deneyimi sağlar. Bu makale, bu yeteneklerin nasıl uygulanacağını açıklar.

1. HLS oynatıcı gelişmiş özellik gereksinimleri

Tam özellikli bir HLS oynatıcı şunları desteklemelidir: çoklu bitrate (ABR) değişimi, çok dilli altyazı/ses parçaları, oynatıcı içi ekran görüntüsü, gelişmiş oynatma kontrolleri (hız, kısayollar) ve gerçek zamanlı durum bilgisi.

2. HLS katmanında yapısal destek

2.1 HLS Master Playlist

HLS, varyant akışları (bitrate, çözünürlük) ve yardımcı medyayı (altyazı, ses) indekslemek için Master Playlist kullanır.

#EXT-X-STREAM-INF:BANDWIDTH=5000000,RESOLUTION=1920x1080
stream_1080p/index.m3u8
#EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",LANGUAGE="zh",NAME="中文",URI="subtitles/zh.vtt"

2.2 Altyazı formatı: WebVTT

WebVTT, HLS’nin önerdiği altyazı formatıdır. Zaman çizelgesi tabanlıdır, stil ve konumlandırmayı destekler ve HTML5 tarafından doğal olarak desteklenir.

3. Ön yüz uygulaması (hls.js ile)

3.1 Kalite değiştirme

hls.js, kullanılabilir kalite seviyelerini levels dizisiyle sağlar. Manuel değiştirme hls.currentLevel = index ile yapılır; otomatik ABR ise yapılandırma parametreleriyle yönetilir.

3.2 Altyazı parçaları

hls.subtitleTracks ile parçalar alınır ve UI’da kullanıcı seçimine sunulur. CSS ::cue pseudo‑elementi WebVTT altyazı stilini özelleştirmek için kullanılır.

3.3 Ses parçası değiştirme

hls.audioTracks ile çok dilli ses parçaları arasında sorunsuz geçiş yapılır.

4. Ekran görüntüsü için teknik yol

Mevcut video karesi HTML5 Canvas üzerinde çizilir ve dışa aktarılır.

• Uygulama mantığı: context.drawImage(video, 0, 0).
• CORS kısıtları: Cross‑origin kaynaklar için Access-Control-Allow-Origin ve <video> üzerinde crossorigin="anonymous" gerekir.

5. Etki analizi

• Deneyim artışı: Çoklu bitrate akıcılığı artırır, altyazılar küresel erişimi destekler, ekran görüntüsü içerik saklamayı kolaylaştırır.
• Maliyet: Transkodlama ve depolama maliyetini artırır, ancak genelde kullanıcı tutma oranını yükseltir.

6. Yaygın sorunların giderilmesi

• Geçişte takılma: Keyframe hizalamasını kontrol edin.
• Altyazı senkron sorunları: Timecode ayarı yapın.
• Siyah ekran görüntüsü: Cross‑origin sorunlarını giderin.

7. Teknoloji yığını önerisi

Oynatma mantığı için hls.js, Video.js veya özel UI ile birlikte önerilir.

HLS oynatıcıları hakkında daha fazla bilgi: https://m3u8-player.net/hls-player/.