מידע בסיסי על סטרימינג של מדיה

Derek Herman

Jaroslav Polakovič

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

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

חשוב לזכור: כדי לספק סטרימינג באתר, השרת צריך לתמוך בכותרת הבקשה Range ב-HTTP. מידע נוסף על הכותרת Accept-Ranges מופיע במאמר התגים <video> ו-<source>.

תרחישים לדוגמה של סטרימינג

יצירת קטעי מדיה ומניפסטים הנדרשים שמתארים את הסטרימינג היא לא תהליך פשוט, אבל סטרימינג מאפשר ליישם כמה תרחישי שימוש מעניינים שלא ניתן להשיג רק על ידי הפניית רכיב <video> לקבוצה של קובצי מקור סטטיים. בקטע הבא מוסבר בהרחבה איך מוסיפים מדיה לדף אינטרנט. קודם כל, כדאי להכיר כמה תרחישים לדוגמה של סטרימינג של מולטימדיה, אם רוצים להיות רחוקים יותר מטעינת קבצים מרובים לאלמנט <video>.

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

פרוטוקולים של סטרימינג

שני פרוטוקולי הסטרימינג הנפוצים ביותר באינטרנט הם Dynamic Adaptive Streaming over HTTP‏ (DASH) ו-HTTP Live Streaming‏ (HLS). נגנים שתומכים בפרוטוקולים האלה יגרפו את קובץ המניפסט שנוצר, יקבעו אילו קטעי מדיה לבקש וישלבו אותם בחוויית הצפייה הסופית.

שימוש ב-<video> להפעלת סטרימינג

הרבה דפדפנים לא יוכלו להפעיל את השידור באופן מקורי. יש תמיכה מסוימת בהפעלה של HLS, אבל בדרך כלל הדפדפנים לא תומכים בהפעלה של סטרימינג DASH. לכן, לרוב לא מספיק פשוט להפנות את <source> ברכיב <video> לקובץ מניפסט.

<video controls>
  <source src="manifest.mpd" type="application/dash+xml">
</video>

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

בדרך כלל, קובצי מניפסט מתארים וריאנטים רבים של מדיה אחת. למשל, קצבי ביט שונים, כמה טראקים של אודיו ואפילו אותו מדיה בקידוד בפורמטים שונים.

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

תוספי מקור מדיה

למרבה המזל, ה-W3C הגדיר תוסף בשם תוספים למקור מדיה (MSE) שיאפשר ל-JavaScript ליצור את שידורי המדיה שלנו. בקיצור, MSE מאפשר למפתחים לצרף אובייקט MediaSource לאלמנט <video> כדי להפעיל בו את כל נתוני המדיה שמוזגים למאגר הנתונים הזמני שמחוברים למכונה MediaSource.

דוגמה בסיסית

const videoEl = document.querySelector('video');
const mediaSource = new MediaSource();

video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener(
  'sourceopen',
  () => {
    const mimeString = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
    const buffer = mediaSource.addSourceBuffer(mimeString);

    buffer.appendBuffer( /* Video data as `ArrayBuffer` object. */ )
  }
);

הדוגמה הפשוטה שלמעלה מדגימה כמה דברים:

• מבחינת <video>, האפליקציה מקבלת נתוני מדיה מכתובת URL.
• כתובת ה-URL שנוצרת היא רק הפניה למכונה של MediaSource.
• המכונה MediaSource יוצרת מופע אחד או יותר של SourceBuffer.
• לאחר מכן, פשוט מוסיפים למאגר נתוני מדיה בינאריים, למשל באמצעות fetch.

המושגים הבסיסיים האלה פשוטים, ואפשר בהחלט לכתוב נגן וידאו תואם DASH ו-HLS, אבל בדרך כלל רוב האנשים בוחרים באחד מהפתרונות הבוגרים יותר בקוד פתוח שכבר קיימים, כמו Shaka Player, JW Player או Video.js, ועוד כמה דוגמאות.

עם זאת, יצרנו דמו של PWA של מדיה שנקרא Kino, שמראה איך מפתחים אתר בסיסי של מדיה בסטרימינג שמאפשר הפעלת מדיה אופליין באמצעות הרכיב הפשוט <video>. בתוכנית הפיתוח שלנו יש תוכניות לתמיכה במסגרות ובניהול זכויות דיגיטליות, בין היתר. לכן כדאי לחזור לכאן מדי פעם כדי לבדוק אם יש עדכונים, או לבקש תכונה. מידע נוסף בנושא זמין במאמר PWA עם סטרימינג אופליין.

פורמט של מקטעי מדיה

במשך זמן רב, ב-DASH וב-HLS היה צורך בקידוד קטעי מדיה בפורמטים שונים. ב-2016, לעומת זאת, נוספה תמיכה בקובצי MP4 רגילים (fMP4) ל-HLS, פורמט שנתמך גם ב-DASH.

קטעי וידאו שמשתמשים בקונטיינר fMP4 ובקודק H.264 נתמכים בשני הפרוטוקולים, ורוב הנגנים יכולים להפעיל אותם. כך יוצרים יכולים לקודד את הסרטונים שלהם רק פעם אחת, וכתוצאה מכך חוסכים זמן ומרחב דיסק.

כדי לשפר את איכות הקבצים ולהקטין את גודל הקבצים, מומלץ לבחור לקודד כמה קבוצות של מקטעי מדיה באמצעות פורמטים יעילים יותר כמו VP9, אבל לפני שנגיע לשלב הבא תצטרכו ללמוד איך להכין קובצי מדיה לאינטרנט בהמשך.