دليل الميزات المتقدمة لمشغل HLS: الترجمات ومعدل البت المتعدد ولقطات الشاشة

مشغل الفيديو الممتاز هو أكثر من مجرد “القدرة على اللعب”. تعد الميزات المتقدمة مثل التبديل بمعدل البت المتعدد والترجمات المتعددة اللغات ولقطات الشاشة داخل المشغل أمرًا بالغ الأهمية للحصول على تجربة مستخدم فائقة. يستكشف هذا المقال كيفية تنفيذ هذه الإمكانات.

1. نظرة عامة على متطلبات الميزات المتقدمة

يجب أن يدعم مشغل HLS الكامل: التبديل بمعدل البت المتعدد (ABR)، والترجمات/المسارات الصوتية متعددة اللغات، ولقطات الشاشة داخل المشغل، وعناصر التحكم في التشغيل المحسنة، ومعلومات الحالة في الوقت الفعلي.

2. الدعم الهيكلي في HLS

2.1 قائمة التشغيل الرئيسية HLS

يستخدم HLS قائمة تشغيل رئيسية لفهرسة التدفقات المتنوعة (معدل البت، الدقة) والوسائط المساعدة (الترجمات والصوت).

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

2.2 تنسيق الترجمة: WebVTT

WebVTT هو التنسيق الرسمي الموصى به من قبل HLS، وهو مدعوم أصلاً بواسطة HTML5 وCSS للتصميم.

3. تنفيذ الواجهة الأمامية (باستخدام hls.js)

3.1 تبديل الجودة

يوفر hls.js مصفوفة levels. يتم التبديل اليدوي عبر hls.currentLevel = index، بينما يتم التعامل مع ABR تلقائيًا بواسطة المكتبة.

3.2 مسارات الترجمة

الوصول إلى المسارات من خلال hls.subtitleTracks. يمكن تخصيص التصميم باستخدام العنصر الزائف CSS ::cue.

3.3 المسارات الصوتية

تمكين التبديل الصوتي السلس متعدد اللغات عبر hls.audioTracks.

4. ميزة لقطة الشاشة

يستخدم HTML5 Canvas لرسم الإطار الحالي.

• المبدأ: context.drawImage(video, 0, 0).
• CORS: يتطلب رأس Access-Control-Allow-Origin وcrossorigin="anonymous" على العلامة <video>.

5. تحليل الأثر

• الخبرة: تضمن السلاسة وسهولة الوصول إلى المحتوى.
• التكلفة: تزيد من تحويل الشفرة والتخزين، ولكنها غالبًا ما تعمل على تحسين الاحتفاظ بالمستخدمين.

6. تصحيح المشكلات الشائعة

• التأتأة: التحقق من محاذاة الإطار الرئيسي.
• إلغاء المزامنة: معايرة الطوابع الزمنية للترجمة.
• لقطات الشاشة السوداء: حل مشكلات CORS.

7. المكدس الموصى به

استخدم hls.js للمحرك الأساسي، المقترن بـ Video.js أو مكونات واجهة المستخدم المخصصة.

لمزيد من التفاصيل حول تنفيذ مشغل HLS، تفضل بزيارة https://m3u8-player.net/hls-player/.