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

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

फ्रांकोइस ब्यूफ़ोर्ट
फ्रांकोइस ब्यूफ़ोर्ट
GitHub

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

लियाम नीसन: मैं आपको ढूंढूंगा और आपको रोक दूंगा.
शॉन बीन: कोई भी सिर्फ़ वीडियो अपने-आप नहीं चलता.
ऐसे इंटरनेट मीम में जिनमें "अपने-आप चलने की सुविधा" को Imgflip और Imgar पर टैग किया गया है.

नए व्यवहार

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

Chrome की अपने-आप चलने वाली नीतियां आसान हैं:

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

मीडिया एंगेजमेंट इंडेक्स

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

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

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

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

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

डेवलपर स्विच

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

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

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

Iframe का डेलिगेशन

अनुमतियों की नीति से डेवलपर, ब्राउज़र की सुविधाओं और एपीआई को अपनी पसंद के हिसाब से चालू और बंद कर सकते हैं. जब किसी ऑरिजिन को अपने-आप चलने की अनुमति मिल जाती है, तो वह अपने-आप चलने की सुविधा के लिए अनुमतियों से जुड़ी नीति की मदद से, क्रॉस-ऑरिजिन iframe को अनुमति दे सकता है. ध्यान दें कि एक ही ऑरिजिन वाले 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 DOMअपवाद की मदद से अस्वीकार कर दिया जाएगा. साथ ही, अपने-आप चलने वाले एट्रिब्यूट को भी अनदेखा कर दिया जाएगा.

उदाहरण

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

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

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

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

Chrome Enterprise की नीतियां

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

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

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

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

इस बात का ध्यान रखें: कभी भी यह न मानें कि कोई वीडियो चलेगा और अगर वीडियो असल में न चल रहा हो, तो 'रोकें' बटन न दिखाएं. यह इतना ज़रूरी है कि मैं इसे उन लोगों के लिए नीचे एक बार और लिखूंगी जो इस पोस्ट को आसानी से पढ़ सकें.

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

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 autoplay>
<button id="unmuteButton"></button>

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

उपयोगकर्ता की गतिविधि को ट्रिगर करने वाले इवेंट की जानकारी, सभी ब्राउज़र पर एक जैसी बनी रहती है. हमारा सुझाव है कि तब तक "click" पर बने रहें. GitHub की समस्या क्या हो रहा है/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://airhorner.com के लिए, अपने-आप चलने वाले इन नीति नियमों के लिए, वेब ऑडियो प्लेबैक की समस्या ठीक होती है.