वेब पर ऑडियो और वीडियो अपने-आप चलने की सुविधा काफ़ी असरदार है. हालांकि, यह सुविधा अलग-अलग प्लैटफ़ॉर्म पर अलग-अलग पाबंदियों के अधीन है.
फ़िलहाल, ज़्यादातर डेस्कटॉप ब्राउज़र, उपयोगकर्ता के इंटरैक्शन के बिना, वेब पेजों को JavaScript की मदद से <video> या <audio> चलाने की अनुमति देते हैं.
हालांकि, ज़्यादातर मोबाइल ब्राउज़र में, JavaScript से वीडियो चलाने के लिए उपयोगकर्ता के साफ़ तौर पर इशारा करना ज़रूरी होता है. इससे यह पक्का करने में मदद मिलती है कि मोबाइल का इस्तेमाल करने वाले लोग, पेज के साथ साफ़ तौर पर इंटरैक्ट किए बिना, मीडिया को गलती से डाउनलोड और चलाना शुरू न कर दें. इनमें से कई लोग, इंटरनेट की स्पीड के लिए पैसे चुकाते हैं या सार्वजनिक जगहों पर इंटरनेट का इस्तेमाल करते हैं.
पहले यह तय करना मुश्किल था कि वीडियो चलाने के लिए, उपयोगकर्ता के इंटरैक्शन की ज़रूरत है या नहीं. साथ ही, यह भी पता लगाना मुश्किल था कि वीडियो अपने-आप चलने की कोशिश करने पर, किन वजहों से वीडियो नहीं चलता. इस समस्या को हल करने के लिए, कई काम के तरीके मौजूद हैं. हालांकि, ये तरीके पूरी तरह कारगर नहीं हैं. इस अनिश्चितता को दूर करने के लिए, play() के मौजूदा तरीके में सुधार करना ज़रूरी था. यह सुधार अब वेब प्लैटफ़ॉर्म पर किया गया है. इसे Chrome 50 में पहली बार लागू किया गया है.
<video> या <audio> एलिमेंट पर play() कॉल करने पर, अब 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() का तरीका कामयाब हुआ या नहीं, यह पता लगाने के अलावा, वादे पर आधारित नए इंटरफ़ेस की मदद से यह भी पता लगाया जा सकता है कि play() का तरीका कब कामयाब हुआ. कुछ मामलों में, वेब ब्राउज़र <video> के प्लेबैक को शुरू करने में देरी कर सकता है. उदाहरण के लिए, जब तक टैब दिखता रहेगा, तब तक डेस्कटॉप पर Chrome, <video> का प्लेबैक शुरू नहीं करेगा. जब तक वीडियो चलना शुरू नहीं हो जाता, तब तक वादा पूरा नहीं होगा. इसका मतलब है कि then() में मौजूद कोड तब तक लागू नहीं होगा, जब तक मीडिया चल रहा है. play() की पुष्टि करने के पिछले तरीकों में, playing इवेंट के लिए तय समय तक इंतज़ार करना और अगर वह ट्रिगर नहीं होता है, तो गड़बड़ी का अनुमान लगाना शामिल है. हालांकि, देर से वीडियो चलने की समस्याओं में, इन तरीकों से गलत नतीजे मिल सकते हैं.
हमने इस नई सुविधा का लाइव उदाहरण पब्लिश किया है. इसे Chrome 50 जैसे किसी ऐसे ब्राउज़र में देखें जो Promise-based इंटरफ़ेस के साथ काम करता हो. ध्यान रखें: इस पेज पर जाने पर, संगीत अपने-आप चलने लगेगा. (अगर ऐसा नहीं है, तो
खतरे का ज़ोन
<source> में <video>, play() के लिए कभी भी वादा अस्वीकार नहीं करता
<video src="not-existing-video.mp4"\> के लिए, play() का वादा अस्वीकार कर दिया गया है, क्योंकि वीडियो मौजूद नहीं है. <video><source src="not-existing-video.mp4" type='video/mp4'></video> के लिए, play() वादा कभी अस्वीकार नहीं करता. ऐसा सिर्फ़ तब होता है, जब कोई मान्य सोर्स न हो.