मोबाइल पर वीडियो म्यूट करके अपने-आप वीडियो चलने की सुविधा - कैनवस हैक और ऐनिमेशन वाले 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>

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

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

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

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

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

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

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

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

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

वीडियो अपने-आप चलने की सुविधा बंद करने से, डेवलपर को एनिमेटेड GIF के साथ-साथ <canvas> और <img> हैक जैसे विकल्पों का इस्तेमाल करने के लिए मजबूर होना पड़ा. बिजली की खपत, परफ़ॉर्मेंस, बैंडविड्थ की ज़रूरतों, डेटा की लागत, और मेमोरी के इस्तेमाल के मामले में, ये तकनीकें ऑप्टिमाइज़ किए गए वीडियो से काफ़ी खराब हैं. वीडियो, ऐनिमेशन वाले 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 में वीडियो अपने-आप चलने की सुविधा, म्यूट करके इस्तेमाल की जा सकती है.
  • Android पर Firefox और UC Browser में, वीडियो अपने-आप चलने की सुविधा पहले से ही काम कर रही है. भले ही, वीडियो को म्यूट किया गया हो या नहीं. ये ब्राउज़र, वीडियो अपने-आप चलने की किसी भी सुविधा को ब्लॉक नहीं करते.

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