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

Sam Dutton

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

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

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

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

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

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

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

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

sourceBuffer.mode = 'sequence';

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

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

בדוגמאות הבאות אפשר לראות את MSE בפעולה, אבל בלי מניפולציה של SourceBuffer.mode:

תמיכה בדפדפנים

  • Chrome מגרסה 50 ואילך כברירת מחדל
  • ב-Firefox, פרטים נוספים זמינים ב-MDN

מפרט

פרטי ה-API