הטמעת סטרימינג HLS אדפטיבי עם פרופילי איכות מרובים

סטרימינג HLS אדפטיבי: איך זה עובד ולמה זה משתלם

העברת MP4 ישירה דרך HTTP נשברת על סרטונים ארוכים, חיבורים חלשים ומכשירים ניידים. משתמשים ממתינים לטעינה, כל ירידת מהירות הורגת את שימור הקהל, ותעבורת ה-CDN גדלה לשווא. אנו מיישמים HLS (HTTP Live Streaming) — הפרוטוקול של אפל שהפך לתקן דה-פקטו באינטרנט. הווידאו נחתך למקטעים של 2-6 שניות, והנגן בוחר אוטומטית את האיכות לפי רוחב הפס הנוכחי. התוצאה: התחלה מיידית, ללא הקפאות, חיסכון של עד 40% בתעבורה.

יישום ה-HLS שלנו עם סטרימינג אדפטיבי ופרופילי איכות מרובים מבטיח העברת וידאו אופטימלית לכל המכשירים.

עם ניסיון של למעלה מ-5 שנים בסטרימינג וידאו ו-30+ פרויקטים מוצלחים, סיפקנו פתרונות HLS אדפטיביים סוהר. בפלטפורמת למידה מקוונת אחת, הפחתנו את ההמתנה מ-15% לפחות מ-1% על ידי יישום HLS עם שלושה פרופילי איכות וקיצצנו את עלויות ה-CDN ב-35%. לדוגמה, לקוח אחד חסך 400 דולר בחודש בעלויות CDN לאחר יישום פתרון ה-HLS שלנו. אנו מבטיחים פעולה יציבה בכל מכשיר: מ-Android ישן ועד ה-iPhone וה-Smart TV העדכניים ביותר.

למה HLS במקום העברת MP4 ישירה?

MP4 עם הורדה פרוגרסיבית (בקשות byte-range) עובד רק עבור קליפים קצרים ודורש תמיכת שרת (Accept-Ranges, partial content). כדי לעבור לאיכות אחרת, יש לטעון קובץ שני במקביל או לסבול מהמתנה. HLS פותר זאת מבחינה ארכיטקטונית: רשימת השמעה (.m3u8) מכילה קישורים למקטעים בקצבי סיביות שונים; הנגן עובר ביניהם בגבולות המקטעים — ללא הפרעה בנגינה.

סטרימינג HLS אדפטיבי יעיל פי 3 מהעברת MP4 ישירה, ומפחית את ההמתנה בעד 90%.

"HTTP Live Streaming עובד על ידי חיתוך הווידאו להורדות HTTP קטנות, שכל אחת טוענת קטע קצר של הווידאו." — תיעוד המפתחים של Apple

השוואה בין HLS ל-MP4:

איך לבחור פרופילי איכות אופטימליים?

הפרופילים נבחרים לפי שני קריטריונים: קהל היעד וסוג התוכן. אנו משתמשים בטבלה זו כבסיס:

לסצנות אקשן או ספורט חי, אנו מגדילים את קצבי הסיביות ב-30-50%; למצגות סטטיות, אנו מפחיתים. אנו מעריכים את הפרויקט שלכם ובוחרים פרופילים באופן אישי.

יצירת HLS עם FFmpeg (איכויות מרובות במעבר אחד)

פקודת FFmpeg אחת יוצרת את כל הפרופילים — יעילה יותר מבחינת CPU מאשר תהליכים נפרדים:

ffmpeg -i input.mp4 \
 -map 0:v:0 -map 0:a:0 \
 -map 0:v:0 -map 0:a:0 \
 -map 0:v:0 -map 0:a:0 \
 \
 -c:v:0 libx264 -crf 28 -preset fast \
 -vf:v:0 "scale=640:360:force_original_aspect_ratio=decrease,pad=640:360:(ow-iw)/2:(oh-ih)/2:black" \
 -b:v:0 600k -maxrate:v:0 800k \
 -c:a:0 aac -b:a:0 96k \
 \
 -c:v:1 libx264 -crf 23 -preset fast \
 -vf:v:1 "scale=1280:720:force_original_aspect_ratio=decrease,pad=1280:720:(ow-iw)/2:(oh-ih)/2:black" \
 -b:v:1 2500k -maxrate:v:1 3000k \
 -c:a:1 aac -b:a:1 128k \
 \
 -c:v:2 libx264 -crf 22 -preset medium \
 -vf:v:2 "scale=1920:1080:force_original_aspect_ratio=decrease,pad=1920:1080:(ow-iw)/2:(oh-ih)/2:black" \
 -b:v:2 5000k -maxrate:v:2 6000k \
 -c:a:2 aac -b:a:2 192k \
 \
 -hls_time 4 -hls_list_size 0 -hls_flags independent_segments \
 -hls_segment_filename "360p/seg%03d.ts" \
 -var_stream_map "v:0,a:0 v:1,a:1 v:2,a:2" \
 -master_pl_name master.m3u8 \
 %v/index.m3u8

ffmpeg -i input.mp4 \ -map 0:v:0 -map 0:a:0 \ -map 0:v:0 -map 0:a:0 \ -map 0:v:0 -map 0:a:0 \ \ -c:v:0 libx264 -crf 28 -preset fast \ -vf:v:0 "scale=640:360:force_original_aspect_ratio=decrease,pad=640:360:(ow-iw)/2:(oh-ih)/2:black" \ -b:v:0 600k -maxrate:v:0 800k \ -c:a:0 aac -b:a:0 96k \ \ -c:v:1 libx264 -crf 23 -preset fast \ -vf:v:1 "scale=1280:720:force_original_aspect_ratio=decrease,pad=1280:720:(ow-iw)/2:(oh-ih)/2:black" \ -b:v:1 2500k -maxrate:v:1 3000k \ -c:a:1 aac -b:a:1 128k \ \ -c:v:2 libx264 -crf 22 -preset medium \ -vf:v:2 "scale=1920:1080:force_original_aspect_ratio=decrease,pad=1920:1080:(ow-iw)/2:(oh-ih)/2:black" \ -b:v:2 5000k -maxrate:v:2 6000k \ -c:a:2 aac -b:a:2 192k \ \ -hls_time 4 -hls_list_size 0 -hls_flags independent_segments \ -hls_segment_filename "360p/seg%03d.ts" \ -var_stream_map "v:0,a:0 v:1,a:1 v:2,a:2" \ -master_pl_name master.m3u8 \ %v/index.m3u8 מחליף את אינדקס הזרם. %v הופך כל מקטע למסגרת מפתח עצמאית — הנגן יכול לעבור איכות באופן מיידי.

מה כלול

אנו מספקים:

• שירות PHP HLS עם הגדרת פרופילים גמישה (מחלקה -hls_flags independent_segments התומכת בכל מספר פרופילים);
• מטפל משימות ליצירה אסינכרונית בתור (Laravel Horizon, Redis);
• הגדרת Nginx עם סוגי MIME נכונים, CORS ושמירת מטמון;
• נגן המשתמש ב-HLS.js עם גיבוי ל-Safari/iOS;
• תיעוד לפריסה ואינטגרציה;
• 30 ימי תמיכה לאחר המסירה.

נגן צד לקוח

HLS.js היא הספרייה העיקרית לדפדפנים ללא תמיכה מובנית (Chrome, Firefox, Edge). קוד האינטגרציה:

<video id="video" controls preload="none"></video>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
  const video = document.getElementById('video');
  const src = '/hls/1/master.m3u8';
  if (Hls.isSupported()) {
    const hls = new Hls({
      maxBufferLength: 30,
      startLevel: -1, // авто-выбор качества
      abrEwmaDefaultEstimate: 1_000_000, // начальная полоса 1 Mbps
    });
    hls.loadSource(src);
    hls.attachMedia(video);
  } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = src;
  }
</script>

אחסון מקטעים

עבור סרטון באורך שעה בשלוש איכויות, כ-2000 קבצי HlsService. דיסק מקומי עובד, אך לצורך הרחבה אנו עוברים לאחסון תואם S3 (MinIO, AWS S3). FFmpeg יכול לכתוב ישירות ל-S3 דרך URI של <video id="video" controls preload="none"></video> <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> <script> const video = document.getElementById('video'); const src = '/hls/1/master.m3u8'; if (Hls.isSupported()) { const hls = new Hls({ maxBufferLength: 30, startLevel: -1, // авто-выбор качества abrEwmaDefaultEstimate: 1_000_000, // начальная полоса 1 Mbps }); hls.loadSource(src); hls.attachMedia(video); } else if (video.canPlayType('application/vnd.apple.mpegurl')) { video.src = src; } </script> אם הוא נבנה עם .ts התומך ב-S3. חלופה: ליצור מקומית, ואז לסנכרן עם s3://.

תהליך ולוח זמנים

1. ניתוח — אנו חוקרים את הווידאו המקורי, קהל היעד ודרישות קצב הסיביות.
2. עיצוב — אנו בוחרים פרופילים, מקודד ופרמטרי ABR.
3. יישום — אנו מגדירים FFmpeg, כותבים את שירות ה-PHP, מקימים את התור, Nginx והנגן.
4. בדיקות — אנו בודקים על מובייל, מחשב, Smart TV; מודדים LCP וזמן עד לפריים הראשון.
5. פריסה — אנו משיקים לסביבת הייצור עם ניטור שגיאות נגן.

לוח זמנים משוער: 2-3 ימי עסקים לאינטגרציה בסיסית. אנו נעריך את הפרויקט שלכם תוך יום אחד — צרו קשר לייעוץ.

טעויות נפוצות וכיצד להימנע מהן

• חוסר תאימות מקודד: אנו משתמשים ב-H.264 High Profile — נתמך בכל המכשירים.
• נתיבי רשימת השמעה שגויים: אנו מוודאים נתיבים יחסיים בעת יצירת המקטעים.
• חוסר CORS: אנו מוסיפים את כותרת libavformat עבור נגנים בדומיינים אחרים.
• יותר מדי קבצים: אנו מגדירים ניקוי מקטעים ישנים (לשידור חי) או משתמשים ב-S3 עם TTL.

עם HLS סוהר, התוכן שלכם יעבוד במהירות ובאמינות בכל מכשיר — צרו קשר כדי להתחיל.