پخش خودکار صدا و تصویر در وب یک قابلیت قدرتمند است و در پلتفرم های مختلف دارای محدودیت های متفاوتی است. امروزه، اکثر مرورگرهای دسکتاپ همیشه به صفحات وب اجازه می دهند تا پخش <video> یا <audio> را از طریق جاوا اسکریپت بدون تعامل کاربر آغاز کنند. با این حال، اکثر مرورگرهای تلفن همراه، قبل از اینکه بازپخش آغاز شده با جاوا اسکریپت انجام شود، به یک اشاره کاربر صریح نیاز دارند. این کمک می کند تا اطمینان حاصل شود که کاربران تلفن همراه، که بسیاری از آنها برای پهنای باند پرداخت می کنند یا ممکن است در یک محیط عمومی باشند، به طور تصادفی شروع به دانلود و پخش رسانه بدون تعامل صریح با صفحه نکنند.
از لحاظ تاریخی تعیین اینکه آیا تعامل کاربر برای شروع پخش مورد نیاز است یا خیر، و تشخیص خرابی هایی که هنگام تلاش برای پخش (خودکار) رخ می دهد یا خیر، دشوار بوده است. راه‌حل‌های مختلفی وجود دارد، اما کمتر از حد ایده‌آل هستند. بهبود روش play() زیربنایی برای رفع این عدم قطعیت مدتهاست که به تعویق افتاده است، و اکنون با اجرای اولیه در Chrome 50 به پلتفرم وب راه یافته است.
یک فراخوان play() روی یک عنصر <video> یا <audio> اکنون یک Promise برمی‌گرداند. اگر پخش موفقیت آمیز باشد، Promise برآورده می شود، و اگر پخش ناموفق باشد، Promise به همراه یک پیام خطا در توضیح شکست رد می شود. این به شما امکان می دهد کدهای بصری مانند زیر بنویسید:
var playPromise = document.querySelector('video').play();
// In browsers that don’t yet support this functionality,
// playPromise won’t be defined.
if (playPromise !== undefined) {
playPromise.then(function() {
// Automatic playback started!
}).catch(function(error) {
// Automatic playback failed.
// Show a UI element to let the user manually start playback.
});
}
علاوه بر تشخیص موفقیت‌آمیز بودن متد play() ، رابط جدید مبتنی بر Promise به شما امکان می‌دهد تعیین کنید که متد play() چه زمانی موفق بوده است. زمینه‌هایی وجود دارد که ممکن است مرورگر وب تصمیم بگیرد شروع پخش را به تأخیر بیندازد—به عنوان مثال، Chrome رومیزی تا زمانی که برگه قابل مشاهده نباشد، بازپخش <video> را آغاز نمی‌کند. تا زمانی که پخش واقعاً شروع نشود، Promise محقق نمی شود، به این معنی که کد داخل then() تا زمانی که رسانه پخش نشود اجرا نمی شود. روش‌های قبلی برای تعیین موفقیت‌آمیز بودن play() ، مانند انتظار مدت زمان معینی برای یک رویداد playing و فرض شکست در صورت عدم اجرا، در سناریوهای پخش تاخیری در معرض منفی کاذب هستند.
ما یک نمونه زنده از این قابلیت جدید را منتشر کرده ایم. آن را در مرورگری مانند Chrome 50 که از این رابط مبتنی بر Promise پشتیبانی می کند، مشاهده کنید. توجه داشته باشید: وقتی صفحه را بازدید می کنید به طور خودکار موسیقی پخش می کند. (البته مگر اینکه اینطور نباشد!)
منطقه خطر
<source> در <video> باعث می‌شود play() هرگز رد نشود
برای <video src="not-existing-video.mp4"\> ، وعده play() همانطور که انتظار می رود رد می شود زیرا ویدیو وجود ندارد. برای <video><source src="not-existing-video.mp4" type='video/mp4'></video> ، وعده play() هرگز رد نمی شود. فقط در صورتی اتفاق می افتد که منابع معتبری وجود نداشته باشد.