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

Sam Dutton

רכיבי האודיו והווידאו ב-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 נוספה תמיכה נוספת במאפיין 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:

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

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

מפרט

פרטי ה-API