במאמר הזה תלמדו על הקונספט המתקדם יותר של סטרימינג מדיה, ובסופו של דבר תהיה לכם הבנה טובה של התרחישים לדוגמה, הפרוטוקולים והתוספים השונים בסטרימינג. נתחיל בהסבר על מה זה סטרימינג בפועל.
סטרימינג של מדיה הוא דרך להעביר ולהפעיל תוכן מדיה חלק אחר חלק. במקום לטעון קובץ יחיד, שעלול להיות איטי אם לא מותאם לרשת, הנגן קורא קובץ מניפסט שמתאר איך מדיה היעד מחולקת למקטעי נתונים נפרדים. בהמשך, מקטעי מדיה מחברים יחד באופן דינמי בזמן הריצה, כנראה בקצבי העברת נתונים שונים, שתלמדו עליהם בהמשך.
חשוב לזכור שכדי לספק סטרימינג באתר, השרת חייב לתמוך בכותרת בקשת ה-HTTP Range. מידע נוסף על הכותרת 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, אבל לפני שנגיע לשלב הבא תצטרכו ללמוד איך
להכין קובצי מדיה לאינטרנט בהמשך.