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

דרק הרמן

ירוסלב פולקוביץ'

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

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

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

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

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

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

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

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

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

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

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

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

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

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

תוספים של מקור מדיה

למרבה המזל, ארגון 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, בין היתר.

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

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

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

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

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