Chrome में वीडियो अपने-आप चलने की नीति

उपयोगकर्ता अनुभव को बेहतर बनाया जा सकता है, विज्ञापन रोकने वाले टूल इंस्टॉल करने की वजहों को कम किया जा सकता है, और डेटा की खपत को कम किया जा सकता है

François Beaufort
François Beaufort
GitHub

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

लियाम नीसन: मैं आपको ढूंढ लूंगा और आपको रोक दूंगा.
शॉन बीन: अपने-आप वीडियो चलने की सुविधा को आसानी से चालू नहीं किया जा सकता.
Imgflip और Imgur पर मिले, "अपने-आप चलने की सुविधा" के तौर पर टैग किए गए इंटरनेट मेम.

नए व्यवहार

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

Chrome पर वीडियो अपने-आप चलने से जुड़ी नीतियां आसान हैं:

मीडिया सहभागिता इंडेक्स

मीडिया एंगेजमेंट इंडेक्स (एमईआई) से यह पता चलता है कि किसी व्यक्ति के किसी साइट पर मीडिया का इस्तेमाल करने की कितनी संभावना है. Chrome का तरीका हर ऑरिजिन के हिसाब से, मीडिया प्लेबैक इवेंट की विज़िट का अनुपात है:

  • ऑडियो/वीडियो को सात सेकंड से ज़्यादा समय तक चलाया गया हो.
  • वीडियो में ऑडियो मौजूद होना चाहिए और उसे अनम्यूट किया गया हो.
  • वीडियो वाला टैब चालू हो.
  • वीडियो का साइज़ (पिक्सल में), 200x140 से ज़्यादा होना चाहिए.

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

उपयोगकर्ता का एमईआई, about://media-engagement के इंटरनल पेज पर उपलब्ध है.

about://media-engagement इंटरनल पेज का स्क्रीनशॉट.
Chrome में about://media-engagement के इंटरनल पेज का स्क्रीनशॉट.

डेवलपर स्विच

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

  • कमांड लाइन के फ़्लैग का इस्तेमाल करके, वीडियो अपने-आप चलने की नीति को पूरी तरह से बंद किया जा सकता है: chrome.exe --autoplay-policy=no-user-gesture-required. इसकी मदद से, अपनी वेबसाइट को इस तरह टेस्ट किया जा सकता है जैसे कि उपयोगकर्ता आपकी साइट पर दिलचस्पी ले रहा हो और वीडियो अपने-आप चलने की अनुमति हमेशा दी गई हो.

  • आपके पास यह तय करने का विकल्प भी होता है कि एमईआई को बंद करके, वीडियो अपने-आप चलने की सुविधा कभी चालू न की जाए. साथ ही, यह भी तय किया जा सकता है कि सबसे ज़्यादा एमईआई वाली साइटों पर, नए उपयोगकर्ताओं के लिए वीडियो अपने-आप चलने की सुविधा डिफ़ॉल्ट रूप से चालू हो या नहीं. फ़्लैग की मदद से ऐसा करें: chrome.exe --disable-features=PreloadMediaEngagementData, MediaEngagementBypassAutoplayPolicies.

iframe का ऐक्सेस देना

अनुमतियों की नीति की मदद से, डेवलपर ब्राउज़र की सुविधाओं और एपीआई को चुनिंदा तौर पर चालू और बंद कर सकते हैं. जब किसी ऑरिजिन को वीडियो अपने-आप चलने की अनुमति मिल जाती है, तो वह वीडियो अपने-आप चलने की अनुमतियों की नीति की मदद से, क्रॉस-ऑरिजिन iframes को वह अनुमति दे सकता है. ध्यान दें कि एक ही ऑरिजिन वाले iframe पर, वीडियो अपने-आप चलने की सुविधा डिफ़ॉल्ट रूप से चालू रहती है.

<!-- Autoplay is allowed. -->
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay">

<!-- Autoplay and Fullscreen are allowed. -->
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay; fullscreen">

अपने-आप चलने की सुविधा के लिए अनुमतियों की नीति बंद होने पर, उपयोगकर्ता के जेस्चर के बिना play() को कॉल करने पर, NotAllowedError DOMException के साथ वादा अस्वीकार कर दिया जाएगा. इसके अलावा, अपने-आप चलने वाले एट्रिब्यूट को भी अनदेखा कर दिया जाएगा.

उदाहरण

उदाहरण 1: जब भी कोई उपयोगकर्ता अपने लैपटॉप पर VideoSubscriptionSite.com पर जाता है, तो वह कोई टीवी शो या फ़िल्म देखता है. उनका मीडिया जुड़ाव स्कोर ज़्यादा है, इसलिए वीडियो अपने-आप चलने की अनुमति है.

दूसरा उदाहरण: GlobalNewsSite.com में टेक्स्ट और वीडियो, दोनों तरह का कॉन्टेंट है. ज़्यादातर लोग टेक्स्ट कॉन्टेंट के लिए साइट पर जाते हैं और कभी-कभी वीडियो देखते हैं. उपयोगकर्ताओं का मीडिया पर जुड़ाव का स्कोर कम होता है, इसलिए अगर उपयोगकर्ता सीधे किसी सोशल मीडिया पेज या खोज से सीधे नेविगेट करता है, तो उसे अपने-आप चलने की अनुमति नहीं दी जाएगी.

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

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

Chrome Enterprise की नीतियां

Chrome की एंटरप्राइज़ नीतियों की मदद से, वीडियो अपने-आप चलने की सेटिंग में बदलाव किया जा सकता है. ऐसा, कीऑस्क या बिना निगरानी वाले सिस्टम जैसे इस्तेमाल के उदाहरणों के लिए किया जा सकता है. वीडियो अपने-आप चलने से जुड़ी एंटरप्राइज़ नीतियां सेट करने का तरीका जानने के लिए, नीति सूची सहायता पेज पर जाएं:

  • AutoplayAllowed नीति से यह कंट्रोल किया जाता है कि वीडियो अपने-आप चलने की अनुमति है या नहीं.
  • AutoplayAllowlist नीति की मदद से, यूआरएल पैटर्न की अनुमति वाली सूची बनाई जा सकती है. इस सूची में शामिल यूआरएल पैटर्न पर, वीडियो अपने-आप चलने की सुविधा हमेशा चालू रहेगी.

वेब डेवलपर के लिए सबसे सही तरीके

ऑडियो/वीडियो एलिमेंट

यहां एक बात याद रखें: कभी भी यह न मानें कि वीडियो चलेगा. साथ ही, वीडियो न चलने पर उसे रोकने का बटन न दिखाएं. यह इतना ज़रूरी है कि मैं इसे यहां एक बार फिर लिखूंगा. ऐसा उन लोगों के लिए है जो उस पोस्ट को सिर्फ़ स्किम करते हैं.

आपको हमेशा यह देखना चाहिए कि प्ले फ़ंक्शन से मिला Promise अस्वीकार किया गया है या नहीं:

var promise = document.querySelector('video').play();

if (promise !== undefined) {
  promise.then(_ => {
    // Autoplay started!
  }).catch(error => {
    // Autoplay was prevented.
    // Show a "Play" button so that user can start playback.
  });
}

उपयोगकर्ताओं का ध्यान खींचने का एक अच्छा तरीका है, म्यूट करके वीडियो अपने-आप चलने की सुविधा का इस्तेमाल करना. साथ ही, उन्हें वीडियो को अनम्यूट करने का विकल्प देना. (नीचे दिया गया उदाहरण देखें.) Facebook, Instagram, Twitter, और YouTube जैसी कुछ वेबसाइटें इस काम को बेहतर तरीके से कर रही हैं.

<video id="video" muted playsinline autoplay>
<button id="unmuteButton"></button>

<script>
  unmuteButton.addEventListener('click', function() {
    video.muted = false;
  });
</script>

हालांकि, सभी ब्राउज़र पर, उपयोगकर्ता को ऐक्टिवेट करने वाले इवेंट को अब भी एक जैसा तय किया जाना चाहिए. मेरा सुझाव है कि आप तब तक "click" पर बने रहें. GitHub समस्याwhatwg/html#3849 देखें.

वेब ऑडियो

Chrome 71 से, Web Audio API के लिए अपने-आप चलने की सुविधा उपलब्ध है. इस बारे में कुछ बातें जानना ज़रूरी है. सबसे पहले, ऑडियो चलाना शुरू करने से पहले, उपयोगकर्ता के इंटरैक्शन का इंतज़ार करना अच्छा होता है, ताकि उपयोगकर्ताओं को पता चले कि कुछ हो रहा है. उदाहरण के लिए, "चलाएं" बटन या "चालू/बंद" स्विच के बारे में सोचें. ऐप्लिकेशन के फ़्लो के हिसाब से, "सामान्य मोड पर लाएं" बटन भी जोड़ा जा सकता है.

अगर आपने पेज लोड होने पर AudioContext बनाया है, तो आपको उपयोगकर्ता के पेज से इंटरैक्ट करने के कुछ समय बाद resume() को कॉल करना होगा. उदाहरण के लिए, जब उपयोगकर्ता किसी बटन पर क्लिक करता है. इसके अलावा, किसी भी अटैच किए गए नोड पर start() को कॉल करने पर, उपयोगकर्ता के जेस्चर के बाद AudioContext फिर से शुरू हो जाएगा.

// Existing code unchanged.
window.onload = function() {
  var context = new AudioContext();
  // Setup all nodes
  // ...
}

// One-liner to resume playback when user interacted with the page.
document.querySelector('button').addEventListener('click', function() {
  context.resume().then(() => {
    console.log('Playback resumed successfully');
  });
});

AudioContext को सिर्फ़ तब भी बनाया जा सकता है, जब उपयोगकर्ता पेज से इंटरैक्ट करता है.

document.querySelector('button').addEventListener('click', function() {
  var context = new AudioContext();
  // Setup all nodes
  // ...
});

यह पता लगाने के लिए कि ऑडियो चलाने के लिए ब्राउज़र को उपयोगकर्ता के इंटरैक्शन की ज़रूरत है या नहीं, इसे बनाने के बाद AudioContext.state देखें. अगर वीडियो चलाने की अनुमति है, तो यह तुरंत running पर स्विच हो जाना चाहिए. ऐसा न करने पर, यह suspended होगा. statechange इवेंट को सुनने पर, बदलावों का पता असींक्रोनस तरीके से लगाया जा सकता है.

इसका उदाहरण देखने के लिए, एक छोटा पुल रिक्वेस्ट देखें. इससे https://airहॉर्न.com के लिए, अपने-आप वीडियो चलने की सुविधा से जुड़ी इन नीति के नियमों के हिसाब से, वेब ऑडियो चलाने की सुविधा ठीक की जाती है.