ওয়েবে স্বয়ংক্রিয়ভাবে অডিও এবং ভিডিও চালানো একটি শক্তিশালী ক্ষমতা, এবং এটি বিভিন্ন প্ল্যাটফর্মে বিভিন্ন বিধিনিষেধের বিষয়। আজ, বেশিরভাগ ডেস্কটপ ব্রাউজার সবসময় ব্যবহারকারীর ইন্টারঅ্যাকশন ছাড়াই জাভাস্ক্রিপ্টের মাধ্যমে ওয়েব পৃষ্ঠাগুলিকে <video> বা <audio> প্লেব্যাক শুরু করার অনুমতি দেবে। বেশিরভাগ মোবাইল ব্রাউজারে, জাভাস্ক্রিপ্ট-ইনিশিয়েটেড প্লেব্যাক ঘটতে পারে তার আগে একটি স্পষ্ট ব্যবহারকারীর অঙ্গভঙ্গি প্রয়োজন। এটি নিশ্চিত করতে সাহায্য করে যে মোবাইল ব্যবহারকারীরা, যাদের মধ্যে অনেকেই ব্যান্ডউইথের জন্য অর্থ প্রদান করেন বা যারা একটি সর্বজনীন পরিবেশে থাকতে পারেন, তারা ভুলবশত পৃষ্ঠাটির সাথে স্পষ্টভাবে ইন্টারঅ্যাক্ট না করে মিডিয়া ডাউনলোড এবং প্লে করা শুরু করবেন না৷
প্লেব্যাক শুরু করার জন্য ব্যবহারকারীর ইন্টারঅ্যাকশন প্রয়োজন কিনা তা নির্ধারণ করা এবং (স্বয়ংক্রিয়) প্লেব্যাকের চেষ্টা করা হলে এবং ব্যর্থ হলে ব্যর্থতাগুলি সনাক্ত করা ঐতিহাসিকভাবে কঠিন। বিভিন্ন সমাধান বিদ্যমান, কিন্তু আদর্শের চেয়ে কম। এই অনিশ্চয়তা মোকাবেলায় অন্তর্নিহিত play() পদ্ধতিতে একটি উন্নতি দীর্ঘ সময়ের জন্য অপেক্ষাকৃত, এবং এটি এখন ওয়েব প্ল্যাটফর্মে পরিণত হয়েছে, Chrome 50- এ একটি প্রাথমিক বাস্তবায়নের সাথে।
একটি <video> বা <audio> উপাদানে একটি play() কল এখন একটি প্রতিশ্রুতি প্রদান করে। যদি প্লেব্যাক সফল হয়, প্রতিশ্রুতি পূরণ করা হয়, এবং যদি প্লেব্যাক ব্যর্থ হয়, প্রতিশ্রুতিটি ব্যর্থতার ব্যাখ্যা করে একটি ত্রুটি বার্তা সহ প্রত্যাখ্যান করা হয়। এটি আপনাকে নিম্নলিখিত মত স্বজ্ঞাত কোড লিখতে দেয়:
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() পদ্ধতি সফল হয়েছে কিনা তা সনাক্ত করার পাশাপাশি, নতুন প্রতিশ্রুতি-ভিত্তিক ইন্টারফেস আপনাকে play() পদ্ধতিটি কখন সফল হয়েছে তা নির্ধারণ করতে দেয়। এমন প্রসঙ্গ রয়েছে যেখানে একটি ওয়েব ব্রাউজার প্লেব্যাক শুরু করতে বিলম্ব করার সিদ্ধান্ত নিতে পারে—উদাহরণস্বরূপ, ট্যাবটি দৃশ্যমান না হওয়া পর্যন্ত ডেস্কটপ ক্রোম <video> প্লেব্যাক শুরু করবে না। প্লেব্যাকটি আসলে শুরু না হওয়া পর্যন্ত প্রতিশ্রুতিটি পূরণ হবে না, যার অর্থ then() এর ভিতরের কোডটি কার্যকর হবে না যতক্ষণ না মিডিয়া চলছে। play() সফল কিনা তা নির্ধারণের পূর্ববর্তী পদ্ধতিগুলি, যেমন একটি playing ইভেন্টের জন্য একটি নির্দিষ্ট সময় অপেক্ষা করা এবং যদি এটি চালু না হয় তবে ব্যর্থতা ধরে নেওয়া, বিলম্বিত-প্লেব্যাক পরিস্থিতিতে মিথ্যা নেতিবাচকগুলির জন্য সংবেদনশীল।
আমরা এই নতুন কার্যকারিতার একটি লাইভ উদাহরণ প্রকাশ করেছি। এটি একটি ব্রাউজারে দেখুন যেমন Chrome 50 যা এই প্রতিশ্রুতি-ভিত্তিক ইন্টারফেস সমর্থন করে। সতর্ক থাকুন: আপনি যখন এটিতে যান তখন পৃষ্ঠাটি স্বয়ংক্রিয়ভাবে সঙ্গীত বাজবে৷ (যদি না, অবশ্যই, এটি হয় না!)
বিপদজনক এলাকা
<video> এর মধ্যে <source> play() প্রতিশ্রুতি দেয় না
<video src="not-existing-video.mp4"\> এর জন্য, play() প্রতিশ্রুতি প্রত্যাশিতভাবে প্রত্যাখ্যান করেছে কারণ ভিডিওটি বিদ্যমান নেই৷ <video><source src="not-existing-video.mp4" type='video/mp4'></video> এর জন্য, play() প্রতিশ্রুতি কখনই প্রত্যাখ্যান করে না। এটি শুধুমাত্র তখনই ঘটবে যদি কোন বৈধ উৎস না থাকে।