Media Source API - به طور خودکار از پخش یکپارچه بخش های رسانه به ترتیب پیوست اطمینان حاصل کنید

سام داتون

عناصر صوتی و تصویری HTML شما را قادر می سازد تا رسانه ها را به سادگی با ارائه یک URL src بارگیری، رمزگشایی و پخش کنید:

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

این در موارد استفاده ساده به خوبی کار می‌کند، اما برای تکنیک‌هایی مانند جریان تطبیقی ، Media Source Extensions API (MSE) کنترل بیشتری را فراهم می‌کند. MSE امکان ساخت جریان ها را در جاوا اسکریپت از بخش های صوتی یا تصویری فراهم می کند.

می توانید 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 اصلاح شده باشد) ترتیب پخش را تعیین می‌کند، بدون توجه به ترتیبی که بخش‌ها به آن اضافه می‌شوند.
  • sequence : ترتیب بخش های بافر شده در جدول زمانی رسانه با ترتیبی که بخش ها به SourceBuffer الحاق می شوند تعیین می شود.

اگر بخش‌های رسانه دارای مهرهای زمانی تجزیه‌شده از داده‌های جریان بایتی هستند که به SourceBuffer اضافه می‌شوند، ویژگی mode SourceBuffer روی سگمنت‌ها تنظیم می‌شود. در غیر این صورت mode به ترتیب تنظیم می شود. توجه داشته باشید که مهرهای زمانی اختیاری نیستند: آنها باید برای اکثر انواع جریان وجود داشته باشند و برای سایرین نمی توانند وجود داشته باشند: مهرهای زمانی درون باند برای انواع جریانی که حاوی آنها هستند ذاتی هستند.

تنظیم ویژگی mode اختیاری است. برای جریان‌هایی که دارای مهر زمانی نیستند (صوتی/mpeg و صوتی/aac) mode فقط می‌تواند از بخش‌ها به ترتیب تغییر کند: اگر بخواهید mode از ترتیبی به بخش‌ها تغییر دهید، خطایی ایجاد می‌شود. برای جریان‌هایی که دارای مهر زمانی هستند، امکان جابجایی بین بخش‌ها و دنباله وجود دارد، اگرچه در عمل احتمالاً رفتاری نامطلوب، درک کردن یا پیش‌بینی دشوار است.

برای همه انواع جریان، می توانید مقدار را از بخش به دنباله تغییر دهید. این بدان معناست که بخش‌ها به ترتیبی که اضافه شده‌اند پخش می‌شوند و مُهرهای زمانی جدید بر این اساس ایجاد می‌شوند:

sourceBuffer.mode = 'sequence';

توانایی تنظیم مقدار mode روی ترتیب ، پخش مداوم رسانه را تضمین می‌کند، مهم نیست که مُهرهای زمانی بخش رسانه ناپیوسته بوده باشند - به عنوان مثال، اگر مشکلی در پخش ویدیو وجود داشته باشد، یا اگر (به هر دلیلی) بخش‌های ناپیوسته اضافه شده‌اند. این امکان وجود دارد که یک برنامه با timestampOffset چند بار پر شود تا از پخش مداوم مطمئن شود، در صورتی که ابرداده جریان درست در دسترس باشد، اما حالت توالی فرآیند را ساده‌تر و کمتر مستعد خطا می‌کند.

برنامه ها و دموهای MSE

اینها MSE را در عمل نشان می دهند، هرچند بدون دستکاری SourceBuffer.mode :

  • API منبع رسانه
  • Shaka Player : نسخه ی نمایشی پخش کننده ویدیو که از MSE برای پیاده سازی DASH با کتابخانه جاوا اسکریپت Shaka استفاده می کند.

پشتیبانی از مرورگر

  • کروم 50 و بالاتر به صورت پیش فرض
  • برای فایرفاکس، برای جزئیات بیشتر به MDN مراجعه کنید

مشخصات

اطلاعات API