वेब पर अपने-आप ऑडियो और वीडियो चलाना एक दमदार क्षमता है.
साथ ही, इस पर अलग-अलग प्लैटफ़ॉर्म पर अलग-अलग पाबंदियां लागू होती हैं.
फ़िलहाल, ज़्यादातर डेस्कटॉप ब्राउज़र, वेब पेजों को JavaScript के ज़रिए <video> या <audio> पर वीडियो चलाने की अनुमति हमेशा देंगे. इसका इस्तेमाल उपयोगकर्ता के इंटरैक्शन के बिना ही किया जाएगा.
हालांकि, ज़्यादातर मोबाइल ब्राउज़र पर JavaScript से वीडियो चलाने से पहले, उपयोगकर्ता के साफ़ तौर पर किए गए जेस्चर की ज़रूरत होती है. इससे यह पक्का करने में मदद मिलती है कि मोबाइल उपयोगकर्ता, जिनमें से ज़्यादातर लोग बैंडविथ के लिए पैसे देते हैं या सार्वजनिक जगह पर रहते हैं, वे पेज से साफ़ तौर पर इंटरैक्ट किए बिना, गलती से मीडिया डाउनलोड करना और चलाना शुरू नहीं कर देते.
यह पता लगाना हमेशा से मुश्किल रहा है कि वीडियो चलाने के लिए उपयोगकर्ता इंटरैक्शन की ज़रूरत है या नहीं. साथ ही, वीडियो चलाने की कोशिश के (ऑटोमैटिक) होने पर, गड़बड़ी होने के बारे में पता लगाना अब भी मुश्किल रहा है. कई तरीके मौजूद हैं, लेकिन ये सबसे बेहतरीन हैं. इस अनिश्चितता का समाधान करने के लिए, 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() तरीका कामयाब हुआ या नहीं. कुछ ऐसे संदर्भ होते हैं जिनमें वेब ब्राउज़र, वीडियो शुरू होने में देरी कर सकता है—उदाहरण के लिए, डेस्कटॉप
Chrome तब तक <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() प्रॉमिस कभी भी अस्वीकार नहीं किया जाता. ऐसा सिर्फ़ तब होता है, जब कोई मान्य सोर्स न हो.