मोबाइल पर वीडियो म्यूट करके अपने-आप वीडियो चलने की सुविधा - कैनवस हैक और ऐनिमेशन वाले GIF से छुटकारा पाएं!

Android के लिए Chrome के वर्शन 53 और इसके बाद के वर्शन में, वीडियो के अपने-आप चलने की सुविधा के लिए आवाज़ बंद करने की सुविधा उपलब्ध है. अगर autoplay और muted, दोनों सेट हैं, तो वीडियो एलिमेंट दिखने पर अपने-आप चलने लगेगा. साथ ही, म्यूट किए गए वीडियो को play() की मदद से प्रोग्राम के हिसाब से शुरू किया जा सकता है. इससे पहले, मोबाइल पर वीडियो चलाने के लिए उपयोगकर्ता को कोई कार्रवाई करनी पड़ती थी. भले ही, वीडियो म्यूट हो.

<video playsinline autoplay muted>
    <source src="video.webm" type="video/webm" />
    <source src="video.mp4" type="video/mp4" />
</video>

इस सैंपल पर जाकर, इसे काम करते हुए देखा जा सकता है. Chrome 53 या इसके बाद के वर्शन में, muted वीडियो अपने-आप चलने लगता है.

वीडियो प्लेयर का स्क्रीनशॉट.

इसके अलावा, अब play() तरीके का इस्तेमाल करके, आवाज़ बंद करके वीडियो चलाने की सुविधा शुरू की जा सकती है. पहले, play() सिर्फ़ तब वीडियो चलाना शुरू करता था, जब उपयोगकर्ता ने कोई कार्रवाई की हो. जैसे, बटन पर क्लिक करना. Android पर इन दो डेमो की तुलना करें. इन्हें Chrome 53 पर आज़माएं. इसके बाद, किसी पुराने वर्शन पर आज़माएं:

हमारा सुझाव है कि जब भी हो सके, autoplay एट्रिब्यूट का इस्तेमाल करें. साथ ही, play() तरीके का इस्तेमाल सिर्फ़ तब करें, जब ज़रूरी हो.

उपयोगकर्ता के किसी जेस्चर, जैसे कि click के जवाब में, वीडियो को प्रोग्राम के हिसाब से अनम्यूट किया जा सकता है. हालांकि, अगर उपयोगकर्ता के जेस्चर के बिना, वीडियो को प्रोग्राम के हिसाब से अनम्यूट करने की कोशिश की जाती है, तो वीडियो चलना बंद हो जाएगा.

muted autoplay में हुए बदलाव की वजह से, play() का इस्तेमाल ऐसे video एलिमेंट के साथ भी किया जा सकेगा जिसे DOM में नहीं बनाया गया है. उदाहरण के लिए, WebGL को चलाने के लिए.

play() वाला तरीका भी एक प्रॉमिस दिखाता है. इसका इस्तेमाल यह देखने के लिए किया जा सकता है कि प्रोग्राम के हिसाब से म्यूट करके वीडियो चलाने की सुविधा चालू है या नहीं. इसका एक उदाहरण simpl.info/video/scripted पर दिया गया है.

यह बदलाव क्यों किया गया है?

Android पर Chrome के पिछले वर्शन में, वीडियो अपने-आप चलने की सुविधा बंद कर दी गई थी. ऐसा इसलिए किया गया था, क्योंकि इससे लोगों को परेशानी हो सकती है, डेटा की खपत ज़्यादा हो सकती है, और कई लोगों को यह सुविधा पसंद नहीं है.

ऑटোপ्ले की सुविधा बंद करने से, डेवलपर को अनचाहे तौर पर ऐनिमेशन वाले GIF और <canvas> और <img> हैक जैसे विकल्पों का इस्तेमाल करना पड़ा. ये तकनीकें, ऑप्टिमाइज़ किए गए वीडियो की तुलना में बिजली की खपत, परफ़ॉर्मेंस, बैंडविड्थ की ज़रूरी शर्तों, डेटा की लागत, और मेमोरी के इस्तेमाल के मामले में काफ़ी खराब हैं. वीडियो, ऐनिमेटेड GIF के मुकाबले बेहतर क्वालिटी दे सकता है. साथ ही, वीडियो को ऐनिमेटेड GIF के मुकाबले ज़्यादा कंप्रेस किया जा सकता है. वीडियो को औसतन 10 गुना और ज़्यादा से ज़्यादा 100 गुना कंप्रेस किया जा सकता है. JavaScript में वीडियो डिकोड किया जा सकता है, लेकिन इससे बैटरी बहुत तेज़ी से खत्म होती है.

इनकी तुलना करें — पहला वीडियो है और दूसरा ऐनिमेटेड GIF है:

क्लिप वाला वीडियो चल रहा है.

ये दोनों काफ़ी हद तक एक जैसे दिखते हैं. हालांकि, वीडियो का साइज़ 200 केबी से कम है और ऐनिमेटेड GIF का साइज़ 900 केबी से ज़्यादा है.

Chrome और अन्य ब्राउज़र बनाने वाली कंपनियां, उपयोगकर्ता के बैंडविथ को लेकर बहुत ज़्यादा सतर्क रहती हैं. कई उपयोगकर्ताओं के लिए, खराब कनेक्टिविटी की तुलना में डेटा की ज़्यादा कीमत, इंटरनेट ऐक्सेस करने में ज़्यादा बड़ी समस्या होती है. वर्कअराउंड के ज़्यादा इस्तेमाल की वजह से, आवाज़ बंद करके अपने-आप चलने वाले वीडियो को ब्लॉक नहीं किया जा सकता. इसलिए, प्लैटफ़ॉर्म के लिए सबसे अच्छा तरीका यह है कि वह अच्छे एपीआई और डिफ़ॉल्ट सेटिंग उपलब्ध कराए.

वेब ज़्यादा से ज़्यादा मीडिया पर आधारित होता जा रहा है. डिजाइनर और डेवलपर, वीडियो का इस्तेमाल करने के नए-नए तरीके खोजते रहते हैं. साथ ही, वे चाहते हैं कि सभी प्लैटफ़ॉर्म पर वीडियो एक जैसा काम करे. उदाहरण के लिए, डिज़ाइन एलिमेंट के तौर पर बैकग्राउंड वीडियो का इस्तेमाल करते समय. ऑटोप्ले की सुविधा म्यूट होने पर, मोबाइल और डेस्कटॉप, दोनों पर इस तरह की सुविधाएं काम करती हैं.

ज़रूरी बातें

  • सुलभता के हिसाब से, अपने-आप चलने वाली सुविधा खास तौर पर समस्या पैदा कर सकती है. Android पर Chrome 53 और इसके बाद के वर्शन में, वीडियो अपने-आप चलने की सुविधा को पूरी तरह से बंद करने की सेटिंग उपलब्ध है: मीडिया सेटिंग में जाकर, वीडियो अपने-आप चलने की सुविधा को चुनें.
  • इस बदलाव से audio एलिमेंट पर कोई असर नहीं पड़ता. Android पर Chrome में, वीडियो अपने-आप चलने की सुविधा अब भी बंद है. ऐसा इसलिए, क्योंकि ऑडियो के लिए म्यूट करके वीडियो अपने-आप चलने की सुविधा का कोई मतलब नहीं है.
  • अगर डेटा बचाने वाला मोड चालू है, तो वीडियो अपने-आप नहीं चलेगा. डेटा बचाने वाला मोड चालू होने पर, मीडिया सेटिंग में अपने-आप चलने की सुविधा बंद हो जाती है.
  • वीडियो अपने-आप चलने की सुविधा, दिखने वाले किसी भी दस्तावेज़, iframe या अन्य जगह पर मौजूद वीडियो एलिमेंट के लिए काम करेगी.
  • ध्यान रखें कि नए तरीके का फ़ायदा पाने के लिए, आपको muted के साथ-साथ autoplay भी जोड़ना होगा: simpl.info/video की तुलना simpl.info/video/muted से करें.

सहायता

  • iOS 10 और इसके बाद के वर्शन पर Safari में, आवाज़ बंद करके वीडियो अपने-आप चलने की सुविधा काम करती है.
  • Firefox और UC Browser, Android पर अपने-आप चलने वाले वीडियो की सुविधा पहले से ही देते हैं. ये वीडियो म्यूट किए गए हों या नहीं, इससे कोई फ़र्क़ नहीं पड़ता. ये दोनों ब्राउज़र, अपने-आप चलने वाले किसी भी वीडियो को ब्लॉक नहीं करते.

ज़्यादा जानें