רכיבי האודיו והווידאו ב-HTML מאפשרים לכם לטעון, לפענח ולהפעיל מדיה, פשוט על ידי מתן כתובת URL של src:
<video src='foo.webm'></video>
הפתרון הזה מתאים לתרחישי שימוש פשוטים, אבל בשיטות כמו סטרימינג אדפטיבי, ה-Media Source Extensions API (MSE) מספק יותר שליטה. MSE מאפשר ליצור שידורים ב-JavaScript מקטעי אודיו או וידאו.
אפשר לנסות את MSE בכתובת simpl.info/mse:

הקוד שבהמשך הוא מהדוגמה הזו.
התג MediaSource
מייצג מקור מדיה לרכיב אודיו או וידאו. אחרי שיוצרים אובייקט MediaSource
ואירוע open
שלו מופעל, אפשר להוסיף אליו SourceBuffer
. אלה משמשים כמאגרים לקטעי מדיה:
var mediaSource = new MediaSource();
video.src = window.URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', function() {
var sourceBuffer =
mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
// Get video segments and append them to sourceBuffer.
}
כדי להעביר פלחים של מדיה אל אלמנט אודיו או וידאו, מוסיפים כל פלח ל-SourceBuffer
באמצעות appendBuffer()
. בדוגמה הזו, הסרטון מאוחזר מהשרת ולאחר מכן נשמר באמצעות ממשקי ה-API של קבצים:
reader.onload = function (e) {
sourceBuffer.appendBuffer(new Uint8Array(e.target.result));
if (i === NUM_CHUNKS - 1) {
mediaSource.endOfStream();
} else {
if (video.paused) {
// start playing after first chunk is appended
video.play();
}
readChunk(++i);
}
};
הגדרת סדר ההפעלה
ב-Chrome 50 נוספה תמיכה נוספת במאפיין SourceBuffer
mode
, שמאפשרת לציין שקטעי המדיה יופעלו ברציפות, בסדר שבו הם נוספו, גם אם לקטעי המדיה היו בהתחלה חותמות זמן לא רציפות.
אפשר להשתמש במאפיין mode
כדי לציין את סדר ההפעלה של קטעי המדיה. הוא יכול לקבל אחד משני ערכים:
- segments: חותמת הזמן של כל קטע (שיכול להיות שהשתנתה על ידי
timestampOffset
) קובעת את סדר ההפעלה, ללא קשר לסדר שבו הקטעים מצורפים. - sequence: סדר הפלחים שנשמרים במטמון בציר הזמן של המדיה נקבע לפי הסדר שבו הפלחים מצורפים ל-
SourceBuffer
.
אם לקטעי המדיה יש חותמות זמן שנותחו מנתוני מקור של בייטים כשהם מצורפים ל-SourceBuffer
, המאפיין mode
של SourceBuffer
יוגדר כ-segments. אחרת, הערך של mode
יהיה sequence. חשוב לזכור שחותמות זמן הן לא אופציונליות: הן חייבות להופיע ברוב סוגי הסטרימינג, ולא יכולות להופיע בסוגי סטרימינג אחרים: חותמות זמן בתוך הנתונים הן תכונה מובנית של סוגי סטרימינג שמכילים אותן.
הגדרת המאפיין mode
היא אופציונלית. בשידורים שלא מכילים חותמות זמן (audio/mpeg ו-audio/aac), אפשר לשנות את mode
רק מ-segments ל-sequence: אם מנסים לשנות את mode
מ-sequence ל-segments, תופיע שגיאה. בשידורים שיש להם חותמות זמן, אפשר לעבור בין פלחים לבין רצף, אבל בפועל סביר להניח שהשינוי הזה יביא להתנהגות לא רצויה, קשה להבנה או קשה לחיזוי.
בכל סוגי הסטרימינג, אפשר לשנות את הערך מ-segments ל-sequence. המשמעות היא שהפלחים יופעלו בסדר שבו הם נוספו, וייווצרו חותמות זמן חדשות בהתאם:
sourceBuffer.mode = 'sequence';
היכולת להגדיר את הערך של mode
כ-sequence מבטיחה הפעלה רציפה של המדיה, גם אם חותמות הזמן של קטעי המדיה לא רצופות – לדוגמה, אם היו בעיות בשילוב של הסרטון, או אם (מסיבה כלשהי) מצורפים קטעים לא רצופים. אם יש מטא-נתונים נכונים של הסטרימינג, אפשר להשתמש ב-polyfill עם timestampOffset
באפליקציה כדי להבטיח שההפעלה תהיה רציפה, אבל המצב sequence מאפשר לבצע את התהליך בצורה פשוטה יותר ולצמצם את הסיכון לשגיאות.
אפליקציות והדגמות של MSE
בדוגמאות הבאות אפשר לראות את MSE בפעולה, אבל בלי מניפולציה של SourceBuffer.mode
:
- Media Source API
- Shaka Player: הדגמה של נגן וידאו שמשתמש ב-MSE כדי להטמיע את DASH באמצעות ספריית JavaScript של Shaka
תמיכה בדפדפנים
- Chrome מגרסה 50 ואילך כברירת מחדל
- ב-Firefox, פרטים נוספים זמינים ב-MDN