במאמר הזה נסביר על הקונספט המתקדם יותר של סטרימינג של מדיה, ובסופו תוכלו להבין טוב יותר את התרחישים השונים לדוגמה, הפרוטוקולים והתוספים של סטרימינג. נתחיל בהסבר על מהו סטרימינג בפועל.
סטרימינג של מדיה הוא דרך להעביר ולנגן תוכן מדיה בחלקים. במקום לטעון קובץ יחיד, שעשוי להיות איטי אם לא מבצעים אופטימיזציה שלו לרשת, הנגן קורא קובץ מניפסט שמתאר איך המדיה של היעד מחולקת למקטעי נתונים נפרדים. מאוחר יותר, קטעי המדיה יתחברו שוב באופן דינמי במהלך זמן הריצה – כנראה בקצב ביט שונה, שבו נעסוק בהמשך.
חשוב לזכור: כדי לספק סטרימינג באתר, השרת צריך לתמוך בכותרת הבקשה 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 הגדיר משהו שנקרא Media Source Extensions (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 נוספה ל-HLS תמיכה בקובצי MP4 מקוטעים (fMP4) רגילים, פורמט שתומך בו גם DASH.
קטעי וידאו שמשתמשים בקונטיינר fMP4
ובקודק H.264
נתמכים בשני הפרוטוקולים, ורוב הנגנים יכולים להפעיל אותם. כך יוצרים יכולים לקודד את הסרטונים שלהם רק פעם אחת, וכתוצאה מכך חוסכים זמן ומרחב דיסק.
כדי לשפר את האיכות ולהקטין את גודל הקבצים, כדאי לבחור בקידוד של כמה קבוצות של קטעי מדיה באמצעות פורמטים יעילים יותר כמו VP9
. עם זאת, לפני שנמשיך, קודם צריך ללמוד איך להכין קובצי מדיה לאינטרנט, וזה מה שנעשה בהמשך.