عناصر صوتی و تصویری HTML شما را قادر می سازد تا رسانه ها را به سادگی با ارائه یک URL src بارگیری، رمزگشایی و پخش کنید:
<video src='foo.webm'></video>
این در موارد استفاده ساده به خوبی کار میکند، اما برای تکنیکهایی مانند جریان تطبیقی ، Media Source Extensions API (MSE) کنترل بیشتری را فراهم میکند. MSE امکان ساخت جریان ها را در جاوا اسکریپت از بخش های صوتی یا تصویری فراهم می کند.
می توانید 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 پشتیبانی بیشتری را به ویژگی 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
،عناصر صوتی و تصویری HTML شما را قادر می سازد تا رسانه ها را به سادگی با ارائه یک URL src بارگیری، رمزگشایی و پخش کنید:
<video src='foo.webm'></video>
این در موارد استفاده ساده به خوبی کار میکند، اما برای تکنیکهایی مانند جریان تطبیقی ، Media Source Extensions API (MSE) کنترل بیشتری را فراهم میکند. MSE امکان ساخت جریان ها را در جاوا اسکریپت از بخش های صوتی یا تصویری فراهم می کند.
می توانید 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 پشتیبانی بیشتری را به ویژگی 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
،عناصر صوتی و تصویری HTML شما را قادر می سازد تا رسانه ها را به سادگی با ارائه یک URL src بارگیری، رمزگشایی و پخش کنید:
<video src='foo.webm'></video>
این در موارد استفاده ساده به خوبی کار میکند، اما برای تکنیکهایی مانند جریان تطبیقی ، Media Source Extensions API (MSE) کنترل بیشتری را فراهم میکند. MSE امکان ساخت جریان ها را در جاوا اسکریپت از بخش های صوتی یا تصویری فراهم می کند.
می توانید 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 پشتیبانی بیشتری را به ویژگی 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
،عناصر صوتی و تصویری HTML شما را قادر می سازد تا رسانه ها را به سادگی با ارائه یک URL src بارگیری، رمزگشایی و پخش کنید:
<video src='foo.webm'></video>
این در موارد استفاده ساده به خوبی کار میکند، اما برای تکنیکهایی مانند جریان تطبیقی ، Media Source Extensions API (MSE) کنترل بیشتری را فراهم میکند. MSE امکان ساخت جریان ها را در جاوا اسکریپت از بخش های صوتی یا تصویری فراهم می کند.
می توانید 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 پشتیبانی بیشتری را به ویژگی 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 مراجعه کنید