ממשק API של מקור מדיה – מבטיח באופן אוטומטי הפעלה חלקה של מקטעי מדיה לפי סדר צירוף

סאם דוטון

רכיבי הווידאו והאודיו של ה-HTML מאפשרים לכם לטעון, לפענח ולהפעיל מדיה, פשוט על ידי ציון כתובת URL מסוג src:

    <video src='foo.webm'></video>

השיטה הזו פועלת טוב בתרחישי שימוש פשוטים, אבל בטכניקות כמו סטרימינג מותאם, ה-Media Source Extensions API (MSE) מספק שליטה רבה יותר. MSE מאפשר ליצור סטרימינג ב-JavaScript מקטעי אודיו או וידאו.

אפשר לנסות את MSE בכתובת simpl.info/mse:

צילום מסך של הסרטון שהופעל באמצעות MSE API.

הקוד הבא לקוח מהדוגמה הזו.

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

המאפיין mode משמש לציון סדר ההפעלה של פלחי מדיה. יש לו אחד משני ערכים:

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

אם חותמות הזמן של פלחי המדיה מנותחות מנתוני מקור הבייטים כשהם מצורפים אל SourceBuffer, המאפיין mode של SourceBuffer יוגדר לפלחים. אחרת, הערך mode יוגדר כרצף. שימו לב: לא חובה להוסיף חותמות זמן: הן חייבות להיות שם עבור רוב סוגי השידורים ולא יכולות להיות שם עבור אחרים: חותמות זמן של In-band הן טבעיות בסוגי השידורים שכוללים אותן.

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

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

sourceBuffer.mode = 'sequence';

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

אפליקציות והדגמות של MSE

בקמפיינים האלה מוצג MSE בפעולה, אבל ללא מניפולציה של SourceBuffer.mode:

תמיכת דפדפן

  • Chrome בגרסה 50 ומעלה כברירת מחדל
  • עבור Firefox, יש להיכנס לדף MDN לקבלת פרטים

מפרט

מידע על ה-API